css中background系列详解-蒲公英云

研究了background相关的属性，虽然很简单，但有些还是不知道，整理出来系统的学习一下，也会更好的掌握这些知识点（细节决定成败，哈哈）

background相关的属性有（把比较常用的放在前面不做过多的解释）：background、background-color、background-image、background-repeat、background-attachment、background-origin、background-blend-mode、background-clip、background-position、background-size、background-position-x、background-position-y

background 简写属性在一个声明中设置所有的背景属性。所有浏览器都支持该属性

可以设置的值有：

background-color：设置元素的背景颜色
background-position：设置背景图像的起始位置
background-size：设置背景图像的尺寸
background-repeat：设置是否及如何重复背景图像
background-origin：background-position 属性相对于什么位置来定位。
background-clip：规定背景的绘制区域
background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动
background-image：为元素设置背景图像
background-blend-mode
background-position-x、background-position-y

如果不设置其中的某个值，也不会出问题，顺序也无所谓先后。通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。（IE8 以及更早的浏览器不支持一个元素多个背景图像。IE7 以及更早的浏览器不支持 “inherit”。IE8 需要 !DOCTYPE。IE9 支持 “inherit”。），看个在线的例子：试一试

background-color和background-image，就不在这里详细的说了，毕竟经常用，都知道吧（注意:background-color没有inherit值）

可以设置多张图片作为背景（IE8 以及更早的浏览器不支持一个元素多个背景图像。）

body
{ 
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}

background-repeat：repeat（默认值）|repeat-y|repeat-x|no-repeat|inherit（IE不支持该值）（所有浏览器都支持该属性）

background-attachment：scroll（默认值）|fixed|inherit（IE不支持该值）（所有浏览器都支持该属性）

background-position:0% 0%（默认值）【两个值，可以是方向（left、top、bottom、center、right）的设置，也可以是百分比的形式，还可以是像素大小的设置，如果只设置一个值，那么第二个默认为center（50%）】，例：left top|top（类似于top center）|20% 20%|40px 40px|40px（类似于40px 50%）。也可以是inherit（但IE不支持该值）

嗯、主要讲讲下面的

background-size

background-size:length|percentage|cover|contain;

length：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
percentage：以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

background-size:80px 60px;
background-size:80% 60%;
background-size:cover;
background-size:contain;

div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; / 老版本的 Firefox /
background-size:63px 100px;
background-repeat:no-repeat;
}

兼容性：IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。

background-origin:

规定 background-position 属性相对于什么位置来定位。注意：如果背景图像的 background-attachment 属性为 “fixed”，则该属性没有效果。

background-origin: padding-box|border-box|content-box;

padding-box:背景图像相对于内边距框来定位
border-box：背景图像相对于边框盒来定位
content-box：背景图像相对于内容框来定位

兼容性：IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-origin 属性。

background-clip:padding-box|border-box|content-box;
兼容性：IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。
下面的不常用，但还是蛮有意思的

background-blend-mode :

background-blend-mode :blend，混合的意思喽，我的理解就是把两种（及以上）的背景进行混合

可以是两个图像背景，也可以是一个颜色和一个图像的背景（但我们知道颜色最多只能有一个了），看下面的写法

background:url("../img/img2.jpg"),url("../img/img.jpg") ; background-blend-mode: exclusion  ; }
background:url("../img/img2.jpg"),#ef3239 ; background-blend-mode: exclusion  ; }

混合模式应该按background-image CSS属性同样的顺序定义。如果混合模式数量与背景图像的数量不相等，它会被截取至相等的数量。

一个定义混合的模式，可以有多个值，用逗号间隔。下面是它可取的值

background-blend-mode:normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light 
| soft-light | difference | exclusion | hue | saturation | color | luminosity
/* 单值 */
background-blend-mode: normal;
/* 双值，每个背景一个值 */
background-blend-mode: darken, luminosity;
background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;

兼容性：这个兼容性不太好，IE下不支持。其他浏览器也要高版本的才支持

属性	Chrome	IE	Firefox	Safire	Opera
background-blend-mode	35.0	不支持	30.0	7.1	22.0

background-position-x和background-position-y

 background-position-x : length | left | center | right  
 background-position-y : length | left | center | right

取值：
length ：百分数 | 由浮点数字和单位标识符组成的长度值
left ：居左
center：居中
right ：居右
兼容性：
chrome和IE支持，写法：
background-position-x:30px;-ms-background-position-x:30px;
background-position-y:30px;-ms-background-position-y:30px;
firefox不支持这两个属性，如果要兼容，需要写成：