CSS3背景温故

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.背景的五种基本属性
background-color（背景颜色）
background-image（背景图片）
background-repeat（背景图片展示方式）
background-attachment（背景图片是固定还是滚动）
background-position（背景图片位置）
综合使用：background:[<background-color>][<background-image>][<background-repeat>][<background-attachment>][<background-position>]

2.background-color属性
语法：background-color:transparent || <color>
transparent：透明色
color：颜色名、rgb色、hls值、十六进制值、rgba色、hsla值

3.background-image属性
语法：background-image:none || <url>
none为默认值，没有的意思
url：图片地址，可以是相对地址，也可以是绝对地址

4.background-repeat属性
语法：background-repeat:repeat || repeat-x || repeat-y || no-repeat
repeat：背景图片沿X轴和Y轴方向平铺
repeat-x：背景图片沿X轴方向平铺
repeat-y：背景图片沿Y轴方向平铺
no-repeat：背景图片不做任何平铺

5.background-attachment属性
语法：background-attachment:scroll || fixed
scroll：背景图片随着页面的其余部分滚动
fixed：背景图片固定不动
注：取值fixed时，运用在html或body标签上，使用在其他标签不能达到固定效果

6.background-position属性
语法：background-position:[percentage] || [length] || [left | center | right] || [top | center | bottom]
作用：用来设置背景图片的位置
默认值：(0,0) || (0%, 0%) || (left top)，其值可以是具体的百分数或数值设置（可以是负值），也可以使用关键字left、center、top、right、top、bottom配合设置，个属性定位方式：

7.CSS3中新增属性
background-origin：指定绘制背景图片的起点
background-clip：指定背景图片的显示范围
background-size：指定背景图片的尺寸大小
background-break：指定内联元素的背景图片进行平铺时的循环方式

8.CSS3背景原点属性：background-origin
作用：用来改变background-position属性的参考原点，默认起始点为左上角
旧语法格式：background-origin:padding || border || content
新语法格式：background-origin:padding-box || border-box || content-box
注：IE9+、Firefox4+、Chrome4+、Safari3+、Opera10.5+都支持新的语法格式
具有三个属性值：padding-box、border-box、content-box
padding-box(padding)：默认值，决定background-position起始位置从padding的外边缘（border的内边缘）开始显示背景图片
border-box(border)：决定background-position起始位置从border的外边缘开始显示背景图片
content-box(content)：决定background-position起始位置从content的外边缘（padding的内边缘）开始显示背景图片
注：IE8以下版本background-origin的默认值border，背景图片的background-position是从border开始显示背景图片
浏览器兼容性：

9.CSS3背景裁切属性：background-clip，新增的第二个属性，用来定义背景图像的裁剪区域。和background-origin属性类似，接受的值有：
padding-box（背景延伸到padding的外边缘，但不会超出边框的范围）
border-box（背景图片在边框下，这个也是background-clip的默认值）
content-box（背景仅在内容区域绘制，不会超出padding和边框的范围）
语法：background-clip:border-box || padding-box || content-box
border-box：默认值，元素背景图像从元素的border区域向外裁剪，即元素边框之外的背景图片都将被裁剪掉
padding-box：元素背景图像从padding区域向外裁剪，即元素padding区域之外的背景图像将被裁剪掉
content-box：元素背景图像从content区域向外裁剪，即元素内容区域之外的背景图像将被裁剪掉
注：在HTML一个元素背景常由元素的内容（content）、内部补白（padding）、边框（border）和外部补白（margin）四部分构成

10.浏览器兼容性

对于background-clip and background-origin，自己现在理解用处不大，自己在实际中也很少用到，也许随着自己的不断深入还能有很好的体会，最主要的感悟是有的时候，我们可以不过多的去明确哪个属性的使用范围，思路不同范围不同，只能渐渐地去体会

11.CSS3背景尺寸属性

使用尺寸属性，可以指定背景图片的尺寸，可以控制背景图片在水平和垂直两个方向的缩放和控制图片拉伸覆盖背景区域的方式，甚至还可以截取背景图片。背景图片能够自适应元素盒子的大小，实现与模块大小完全适应的背景图片，避免因区块尺寸不同而需要设计不同的背景图片，在实际工作中，背景图片可以达到任意尺寸

语法：background-size:auto || <length> || <perentage> || cover || contain
auto：默认值，将保持背景图片的原始尺寸
<length>：取具体的整数值（px值），将改变背景图片的大小
<percentage>：取值为百分值，可以是0% ~ 100%。此时，同样改变背景图片的大小，但此值是相对于元素的宽度来进行计算，并不是根据背景图片的宽度来进行计算
cover：将背景图片放大，以适合铺满整个容器。但这种方法会导致背景图片失真
contain：保持背景图像的宽高比例，将背景图像缩放到宽度或高度正好适应所定义背景容器的区域

当取值是<length>和<percentage>的时候，可以取两个值，第一个是宽度，第二个是高度；当取一个值的时候，第二个值相当于设置成auto，让背景图片的高度按照比例缩放

cover PK contain:

第一张是cover，第二张是contain，所得：cover体现的是满足容器，也就是铺满容器为主；contain体现的是图片显示全为主以图片为主

浏览器兼容性：

12.内联元素背景图像平铺循环方式background-break属性
用来定义内联元素背景图像进行平铺时的循环方式，其中有三个属性值：bounding-box、each-box、continuous，分别表示三种平铺循环方式。可惜这个属性兼容目前仅属于FireFox，写成【-moz-background-inline-policy】
bounding-box：背景图像在整个内联元素中进行平铺
each-box：背景图像在行内中进行平铺
continuous：下一行的背景图像紧接着上一行中的图像继续平铺
这个属性的兼容性令人发指，自己最好亲自试验一下，对于兼容性没有什么绝对性的支持和不支持，更多的时候还是根据使用情况自己检测

13.CSS3多背景属性
能够在单一容器上使用复合的背景图像，CSS3要想达到多背景就需要多个容器；
通过CSS3的多背景属性，只需要一个容器，在CSS的background-image或者background属性中列出需要使用的所有背景图像，用逗号分开。其中的每张图片都具有background中的属性，例如可以定位、设置重复、改变背景图像大小以及其他可以单独控制的特性
语法和参数：background-(position||repeat||clip||origin||attachment)属性，相邻背景之间必须使用逗号分隔开
具体的语法：background:[background-image] | [background-position][/bckground-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin], *
也可以把上面的缩写拆解成以下形式：
background-image:url1, url2, url3, url4 ,..., urlN;
background-repeat:repeat1,repeat2,..., repeatN;
background-position:position1,position2,...,positionN;
background-size:size1,size2,...sizeN;
background-attachment:attachment1,attachment2,...,attachmentN;
background-clip:clip1,clip2,...,clipN;
background-origin:origin1,origin2,...,originN;
background-color:color;
注：除background-color（只能设置一个，设置多个将是一种致命的语法错误）之外，其他属性都可以设置多个属性值，前提是元素有多个背景图像存在，多个属性值之间必须使用逗号隔开
在多背景图像中，先声明的背景图片将会居于最上层，最后指定的背景图片将放在最底层
在CSS2中多背景，第一种是使用多个容器，第二种是把多张图片合并到一张图片上
多背景图片兼容性：