background复合属性详解（上）：background-image
background复合属性是个很复杂的属性，花样⾮常多，⽐较神奇的是css3
中⽀持多图⽚背景了，这篇⽂章先讲讲background-image属性，其他背景属性会在后续的⽂章综合总结。
⼀、最基本的情况是指定⼀张图⽚的url作为背景：
<style>
.parent{
height:200px;
width:500px;
border: 10px solid rgb(125, 125, 123);
background-color: #bff;
background-image:url(halfRombes.png);
}
</style>
效果如下（浏览器默认背景图⽚重复平铺）：
一周食谱
⼆：将渐变指定为背景：
background-image: linear-gradient(to left top, red, blue);
效果如下（由右下⾓到左上⾓，由红⾊渐变到蓝⾊）：
除了线性渐变，还有径向渐变，径向渐变也就是由中⼼向外辐射的渐变。现代浏览器（包括ie10+）⽀持。
具体的语法这⾥不讨论，因为篇幅实在太长，请移步获取更详细的信息：
，
三、使⽤ba64编码的图⽚：
以本⽂第⼀个例⼦的图为例：等等我英语
该图的ba64编码为：
"data:image/png;ba64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAeCAYAAAAcni9KAAAAaElEQVQ4jcXTMQ4AEBAEQH/yJ69Vq31CTSWRC26dDcVVu1NtzvkQq+VcyuUDP
还礼将图⽚url指向该图⽚编码，那么会得到和第⼀个例⼦⼀样的效果。
现代浏览器⽀持情况优秀，ie8+⽀持，对ba64编码具体⽀持情况移步：
可以看见，ba64编码以data：开头，指明是什么类型的图⽚，如data:image/png；表⽰这串编码是png图⽚，接着是'ba64；表⽰是ba64编码格式，最后跟
着的就是图⽚的编码信息了。
那么ba64是什么呢？
Ba64是⼀种基于64个可打印字符来表⽰⼆进制数据的编码⽅式，可⽤于在http环境下传递较长的标识信息。Ba64常⽤于表⽰、传输、存储⼀些⼆进制数
据，图⽚也是⼆进制数据。（在Ba64中的可打印字符包括字母A-Z、a-z、数字0-9，这样共有62个字符，此外两个可打印符号在不同的系统中⽽不同）
ba64编码的图⽚好处就在于：当要单独使⽤很⼩的图⽚（⽐如⽤于平铺的背景图），就可以将图⽚改为ba64形式来减少http请求。
我们可以通过HTML5的新特性⾃⼰来获取图⽚的ba64编码⽽不借助其他⼯具：
1、⼀个⽅法是基于HTML5的FileReader对象的readAsDataURL()⽅法，下⾯就是⼀个读取input上传的图⽚然后展⽰出来的例⼦，sult就是图⽚的
ba64编码信息。
var reader = new FileReader();
document.body.innerHTML = '<img src="'+sult+'" alt="">'
}
}
2、还有⼀个⽅法是使⽤HTM5的canvas中图⽚处理的toDataURL()⽅法，我之前的⼀篇⽂章就是讲如何使⽤canvas处理图像数据的⽅法：
，
可以简单的修改下⽂章中的代码，只要将图⽚画到画布上，不要修改图⽚数据，然后通过toDataURL()返回图⽚的ba64编码即可。
3、还有个更懒的⽅法就是借助firefox、chrome浏览器⾃带的开发⼯具（通过F12召唤）查看图⽚的ba64编码。
具体⽅法如下，灰常简单：
firefox：⾸先定位到要查看编码的图⽚，在inspector⾥⾯右键该图⽚，选择下图红框中的copy image data url，就能copy该图⽚的ba64编码，粘贴使⽤即可。
水杯塑料chrome：同样要定位到要查看编码的图⽚，在elements⾥⾯右键该图⽚，选择下图红框中的open link
in resources panel，切换到resources板块，右键该图⽚，选择copy image as data url就能copy该图⽚的ba64编码，粘贴使⽤即可。
图（1）：
图（2）：
是不是超级简单！
四、终于讲到多图⽚背景了：
在CSS3稳定版草案中对多图⽚背景制定了规范： background-image属性可以通过","来分隔多个图像url设置多个背景图像。
每⼀个图像背景就创建了⼀个背景层（background layer），有⼏个背景图⽚就定义了⼏个层。background-image图⽚列表中第⼀个图像离⽤户最近，最后的图像离⽤户最远，background-color在离⽤户最远的背景图像下⾯，border-color和border-image在第⼀个背景图像上⾯，类似ps中的图层的概念。
如果⼀个图像（⽐如URI⽆效）不能成功加载出来，浏览器会将对应background-image的值认定为none（对应的图层还是存在的），表⽰图⽚丢失，但不影响其他背景图⽚的渲染和呈现。由于⽹络会存在不稳定导致背景图像加载不出来，所以始终应该提供background-color。
当然最关⼼的还是浏览器的⽀持情况，让⼈放⼼的是chrome,firefox,ie9+，移动终端浏览器都⽀持多背景图⽚。
好了好了，废话有点多，还是例⼦更直观：
接下来我会⽤到4张图(halfRombes.png, MicrobiaMat.png, Stairs.png, Stars.png)，按顺序添加到background-image中:
代码如下：
.parent{
height:200px;
width:500px;
border: 10px solid rgb(125, 125, 123);
background-color: #bff;
background-image:url(halfRombes.png), url(MicrobiaMat.png), url(Stairs.png), url(Stars.png);
background-position: left top, right bottom, right top;
background-repeat: no-repeat, repeat-x;
}
是的，background-position,background-origin,background-repeat等属性的值也要相应地进⾏设置，也是⽤","分隔开，⼀⼀对应声明的多张图⽚。如果某个属性设置了过多的值，则舍弃排在后⾯的多余的值；如果某个属性没有提供⾜够的值，就重复应⽤该属性的值列表。效果如下：
咱们来逐条分析：
由于排在背景图⽚列表前⾯的图⽚会在上层，⽽后⾯的图⽚在下层，所以看到三⾓形的图在最上⾯，五⾓星的图在最下⾯。
happen用法position只给了3个值，所以后⾯的图会重复position列表的值，所以实际上是：left top, right bottom, right top, left top;
repeat只给了2个值，所以会重复该属性列表，实际上是：no-repeat, repeat, no-repeat, repeat;
其他背景属性值的应⽤规则同样如此。
有意思的是，background：inherit;（ie7-不⽀持）可以让元素继承⽗元素的背景属性，就连多图⽚背景也不例外哦（现代浏览器⽀持多图背景的继承，移动端更是妥妥的⽀持），下⾯是⼀个嵌套了div的例⼦，在上⾯例⼦中.parent容器嵌套⼀个.child容器，并对⼦容器应⽤如下样式：
.child{
margin-top: 220px; /*为了让⼦容器显⽰在⽗容器下⾯，⽐较好⽐较*/
height: 200px;
background:inherit; /*继承⽗元素的背景*/
}
结果是这样的：
当然，ba64编码的图⽚也可以⽤于多图⽚背景，渐变也可以，甚⾄可以混⽤在⼀起！
pc端和移动端浏览器也能提供很不错的⽀持。
将上⾯的例⼦混在⼀起是这样的：
.parent{
八段锦名称顺序
height:200px;
width:500px;
border: 10px solid rgb(125, 125, 123);
background-color: #bff;
background-image:url(halfRombes.png), url(data:image/png;ba64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAeCAYAAAAcni9KAAAAaElEQVQ4jcXTMQ4AEBAEQH/yJ69Vq31CTSWRC26dDcVVu1NtzvkQq+VcyuUDPMUpFwJEce9yoIbH background-position: left top, right bottom, right top;
background-repeat: no-repeat, repeat-x;
}
效果如下：
我承认这个图是很丑，但只是为了说明⽤法。这⾥有个使⽤多个渐变设置背景图案的⼀个⽹站，奥妙之处⼤家⾃⼰玩味，上⾯的图也是从这个⽹站借⽤来
文献检索报告的：
五：设置多图⽚背景混合模式：
当在⼀个容器同时指定了多个背景图⽚后，默认情况下，图⽚是按声明的图⽚顺序来⼀层层叠加显⽰，类似于ps中的图层的概念。默认情况下，如果上层的
图⽚背景透明，那么可以看到下层的图⽚，如上层的图⽚不透明，那么就看不到下层的图⽚了。但是有个属性正好能⽤来定义多图背景的图⽚重叠显⽰⽅
式，这个属性是：
background-blend-mode：[ normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion |
hue | saturation | color | luminosity ]
（对于各可能值的描述，这⾥有更详细的正式说明：）
通过指定背景混合模式，能够让背景图⽚和背景颜⾊的重叠部分的颜⾊以⼀定的⽅式混合。
可以指定⼀种混合模式应⽤到所有背景图⽚，也可以逐个指定不同的混合模式，根据background-image声明的图⽚顺序依次设置。
明星穿着ie浏览器和uc浏览器是不⽀持的，safari部分⽀持（不⽀持hue，saturation，luminosity，color）：。
当我对.parent容器应⽤：background-blend-mode:luminosity;
效果是这样的（safari不⽀持luminosity值）：
哈哈，由此可以知道background-blend-mode不能通过设置background：inherit被继承。
需要注意的是background-blend-mode还没纳⼊css候选推荐，但是浏览器⽀持情况已经很给⼒了。
不得不感慨，CSS真的是越来越强⼤了。
在⽂末，觉得还是有必要解开⼀个疑惑：
为什么url⾥⾯的值有⼈⽤引号包起来，有⼈不⽤引号包起来呢？
其实w3c对uri值的编码：
规范原⽂是这么说的：
The format of a URI value is 'url(' followed by optional followed by an optional single quote (') or double quote (") character followed by the URI itlf, followed by an optional single quote (') or double quote (") character followed by optional white space followed by ')'. The two quote characters must be the same.
Some characters appearing in an unquoted URI, such as parenthes, white space characters, singl
e quotes (') and double quotes ("), must be escaped with a backslash so that the resulting URI value is a URI token: '\(', '\)'.
翻译成中⽂就是：url()可以⽤可选的空格包住可选的单引号或双引号，接着包住uri本⾝。当url()没有⽤引号包住uri时，如果uri中包含括号、空格、单引号、或者双引号，必须通过'\'进⾏转码，例如，如果uri包含'()'，那么要转码成这样：'\(', '\)'。
也就是url(a.png) 等价于url( a.png )，等价于url('a.png)，等价于url("a.png")，等价于url( "a.png" )。
所以不加引号是符合规范的，并且可以减少css⽂件⼤⼩，虽然作⽤微乎其微。浏览器们对此的实现是符合规范，（ie9下的ie7模式有点怪胎，不管他）
有观点认为不加引号会有安全问题，这个主要是由于xss攻击，但是既然css⽂件是开发者⾃⼰编写的，也就是不会在url中插⼊不可信数据，那么当然可以放⼼的省略引号。
本⽂到此就要结束啦，主要讲了background-image属性，下次将会对其他背景属性进⾏完整的总结。
-------------------------------转载注明出处^_^：
