background详解

–前言
–background属性(css2.0)

 - background-color： 设置背景颜色- background-image : url() 设置背景图像- background-repeat : 设置重复方式 取值 repeat-x | repeat-y | repeat | no-repeat;- background-attachment : 设置背景图片的固定方式 取值 fixed | scrol- background-position : 设置背景的左上角位置,坐标可以是以百分比或固定单位 。取值 X轴坐标,Y轴坐标[top,bottom,center,left,right,10px,20%];- background 属性的简写形式：(background 各个值的顺序依次)
background-color | background-image | background-repeat | background-attachment | background-position

1.background-color：设置背景颜色，接受任何合法的颜色值。

    background-color: #ccc;background-color: red;background-color: rgba(0,0,0);background-color: transparent; //把背景色设置为透明,默认情况下只要不设置背景颜色（或者背景图片），背景就是透明的

2.background-image : url() 设置背景图像；默认值是 none，表示背景上没有放置任何图像。

  注意：当图片不足以平铺整个元素背景，空出的部分将显示background-color设置的颜色。

background-image: url('1.jpg');
background-image: none; //默认为none

3.background：设置重复方式取值 repeat-x | repeat-y | repeat | no-repeat | inherit
4.background-position：设置背景图片在元素中的位置
–取值：坐标可以是以百分比或固定单位。取值 X轴坐标,Y轴坐标[top,bottom,center,left,right,10px,20%];
- 4.1取数值

<div class="box"></div>
}.box {width: 400px;height: 400px;border: 1px solid #ccc;background-image: url(2.png);background-repeat: no-repeat;background-position: 0 0;}

background-position: 100px 0;

background-position: -30px 0;

4.2取方向值
-水平方向： left , center ,right
-垂直方向：top ，center ,bottom

background-position: left top;

background-position: center top;

background-position: right bottom;

4.3百分比

background-position: 10% 40%;

background-position: 100% 40%;

5.background-attachment : 设置滚动页面时，背景图怎么变化。取值 fixed | scroll | inherit.如果设值为fixed当向下滚动页面时，内容向下滚动，而背景不滚动（也可以说相当于内容向上移动）（背景图片只能在其元素内移动）。设值为scroll,背景就会跟着滚动。

<div class="box"></div>
<style>.box {width: 400px;height: 1400px;border: 1px solid #ccc;background-image: url(2.png);background-repeat: no-repeat;background-position: 0 0;background-attachment: scroll;}</style>

.box {width: 400px;height: 1400px;border: 1px solid #ccc;background-image: url(2.png);background-repeat: no-repeat;background-position: left bottom;background-attachment: fixed;}

background CSS3增加的属性

1.background-clip（在哪里显示背景图片）: border-box|padding-box|content-box|no-clip

background-clip: border-box;
background 在 border内显示，和现在的方式一样。.
background-clip: padding-box;
backgrounds 在padding内显示,而非border，跟IE6的处理方式相同。
background-clip: content-box;
backgrounds 只显示在内容内,而非border 或 padding。
background-clip: no-clip;
默认值，和border-box一样

2.background-origin（和background-position属性一起使用。改变background-position 的计算方式）: border-box | padding-box | content-box

ackground-origin: border-box;
background-position从border开始计算。
background-origin: padding-box;
background-position从padding开始计算。
background-origin: content-box;
background-position从内容开始计算。

3.background-size（定义背景图片大小）: contain | cover | px | 百分比

background-size: contain;
缩小图片以符合元素大小。
background-size: cover;
扩展图片以符合元素大小。
background-size: 50px 140px;
重定义大小。
background-size: 30% 80%;
用百分比重定义。

background详解相关推荐

css样式之background详解（格子效果）
background用法详解: 1.background-color 属性设置元素的背景颜色可能的值 color_name 规定颜色值为颜色名称的背景颜色(比如 red) he ...
CSS背景background详解，background-position详解
背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...
background家族详解
background家族详解 CSS2中background家族连写形式 background: background-color, background-image, background-repe ...
Background Matting详解
转自:https://zhuanlan.zhihu.com/p/148265115?from_voters_page=true https://www.aiuai.cn/aifarm1462.html ...
css详解background八大属性及其含义
background(背景) 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由元素外边距(margin).元素边框(border).元素内边距(padding)和元素内容(c ...
background属性详解
background属性详解 background属性主要由以下5个属性组成, background-color::规定要使用的背景颜色 background-image:规定要使用的背景图像 bac ...
html 显示消息数量,html实现消息按钮上的数量角标的实例详解
这篇文章主要介绍了html在消息按钮上增加数量角标的实现代码,需要的朋友可以参考下 html代码: 消息4 css代码:/*角标 */ .ii{ display: none; background: ...
[转]CSS hack大全详解
转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...
MySQL管理之日志详解
MySQL日志详解错误日志 MySQL的错误信息是在data目录下的错误日志本身所定义的内容本身是可以定义的编辑配置文件,定义错误日志: log-error=/path/to/xx.err ...
vuepdf转换html,Vue网页html转换PDF（最低兼容ie10）的思路详解
Vue网页html转换PDF(最低兼容ie10)的思路详解发布时间:2020-10-16 13:05:09 来源:脚本之家阅读:95 作者:冷藏封 HTML转PDF: 1.页面底层实现--Vue: ...

background详解

background详解相关推荐

最新文章

热门文章