background复合属性详解（上）：background-image

background复合属性是个很复杂的属性，花样很是多，比较神奇的是css3

中支持多图片背景了，这篇文章先讲讲background-image属性，其余背景属性会在后续的文章综合总结。

 

1、最基本的状况是指定一张图片的url做为背景：

<style> .parent{ height:200px; width:500px; border: 10px solid #7d7d7b; background-color: #bff; background-image:url(halfRombes.png);     } </style>

 

效果以下（浏览器默认背景图片重复平铺）：

 

二：将渐变指定为背景：

      background-image: linear-gradient(to left top, red, blue);

 

效果以下（由右下角到左上角，由红色渐变到蓝色）：

 

除了线性渐变，还有径向渐变，径向渐变也就是由中心向外辐射的渐变。现代浏览器（包括ie10+）支持。

具体的语法这里不讨论，由于篇幅实在太长，请移步获取更详细的信息：

MDN#linear-gradient，

MDN#radial-gradient。

 

3、使用base64编码的图片：

以本文第一个例子的图为例：

  

该图的base64编码为：

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAeCAYAAAAcni9KAAAAaElEQVQ4jcXTMQ4AEBAEQH/yJ69Vq31CTSWRC26dDcVVu1NtzvkQq+VcyuUDPMUpFwJEce9yoIbHHg+usOxwocSznA87XmV2aH4rbbM3ENmVB5FdeXC3qcT3UEMS30EUjdgOTxH0Vrtri9j3uTwNEWIAAAAASUVORK5CYII="

 

将图片url指向该图片编码，那么会获得和第一个例子同样的效果。

现代浏览器支持状况优秀，ie8+支持，对base64编码具体支持状况移步：浏览器对base64编码的支持状况

能够看见，base64编码以data:开头，指明是什么类型的图片，如data:image/png;表示这串编码是png图片，接着是'base64;表示是base64编码格式，最后跟着的就是图片的编码信息了。

那么base64是什么呢？

Base64是一种基于64个可打印字符来表示二进制数据的编码方式，可用于在 http环境下传递较长的标识信息。Base64经常使用于表示、传输、存储一些二进制数据， 图片也是二进制数据。（在Base64中的可打印字符包括字母A-Z、a-z、数字0-9，这样共有62个字符，此外两个可打印符号在不一样的系统中而不 同）

base64编码的图片好处就在于：当要单独使用很小的图片（好比用于平铺的背景图），就能够将图片改成base64形式来减小http请求。

 

咱们能够经过HTML5的新特性本身来获取图片的base64编码而不借助其余工具：

一、一个方法是基于HTML5的FileReader对象的readAsDataURL()方法，下面就是一个读取input上传的图片而后展现出来的例子，this.result就是图片的base64编码信息。

document.getElementById("file").onchange=function(){ var reader = new FileReader(); reader.readAsDataURL(this.files[0]); reader.onload = function(e){ document.body.innerHTML = '<img src="'+this.result+'" alt="">' } }

 

二、还有一个方法是使用HTM5的canvas中图片处理的toDataURL()方法，我以前的一篇文章就是讲如何使用canvas处理图像数据的方法：

canvas学习笔记：canvas对图片的像素级处理--ImageData的应用，

能够简单的修改下文章中的代码，只要将图片画到画布上，不要修改图片数据，而后经过toDataURL()返回图片的base64编码便可。

 

4、终于讲到多图片背景了：

在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 #7d7d7b;       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等属性的值也要相应地进行设置，也是用","分隔开，一一对应声明的多张图片。若是某个属性设置了过多的值，则舍弃排在后面的多余的值；若是某个属性没有提供足够的值，就重复应用 该属性的值列表。效果以下：

 

 

我们来逐条分析：

因为排在背景图片列表前面的图片会在上层，然后面的图片在下层，因此看到三角形的图在最上面，五角星的图在最下面。

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;  /*继承父元素的背景*/     }

 

 

结果是这样的：

 

 

固然，base64编码的图片也能够用于多图片背景，渐变也能够，甚至能够混用在一块儿！

pc端和移动端浏览器也能提供很不错的支持。

将上面的例子混在一块儿是这样的：

 

.parent{            height:200px;       width:500px;       border: 10px solid #7d7d7b;       background-color: #bff;         background-image:url(halfRombes.png), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAeCAYAAAAcni9KAAAAaElEQVQ4jcXTMQ4AEBAEQH/yJ69Vq31CTSWRC26dDcVVu1NtzvkQq+VcyuUDPMUpFwJEce9yoIbHHg+usOxwocSznA87XmV2aH4rbbM3ENmVB5FdeXC3qcT3UEMS30EUjdgOTxH0Vrtri9j3uTwNEWIAAAAASUVORK5CYII=), url(Stairs.png), linear-gradient(to left top, red, blue);      background-position: left top, right bottom, right top;       background-repeat: no-repeat, repeat-x; }

 

 

效果以下：

 

我认可这个图是很丑，但只是为了说明用法。这里有个使用多个渐变设置背景图案的一个网站，奥妙之处你们本身玩味，上面的图也是从这个网站借用来的：css3patterns

 

五：设置多图片背景混合模式：

当在一个容器同时指定了多个背景图片后，默认状况下，图片是按声明的图片顺序来一层层叠加显示，相似于ps中的图层的概念。默认状况下，若是上层的图片背景透明，那么能够看到下层的图片，如上层的图片不透明，那么就看不到下层的图片了。可是有个属性正好能用来定义多图背景的图片重叠显示方式，这个属性是：

background-blend-mode：[ normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn |   hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity ]

（对于各可能值的描述，这里有更详细的正式说明：MDN#blend-mode）

 

经过指定背景混合模式，可以让背景图片和背景颜色的重叠部分的颜色以必定的方式混合。

能够指定一种混合模式应用到全部背景图片，也能够逐个指定不一样的混合模式，根据background-image声明的图片顺序依次设置。

ie浏览器和uc浏览器是不支持的，safari部分支持（不支持hue，saturation，luminosity，color）：浏览器对background-blend-mode支持状况。

 

当我对.parent容器应用：background-blend-mode:luminosity;

效果是这样的（safari不支持luminosity值）：

 

 

哈哈，由此能够知道background-blend-mode不能经过设置background：inherit被继承。

须要注意的是background-blend-mode还没归入css候选推荐，可是浏览器支持状况已经很给力了。

 

不得不感慨，CSS真的是愈来愈强大了。

在文末，以为仍是有必要解开一个疑惑：为何url里面的值有人用引号包起来，有人不用引号包起来呢？

其实w3c对uri值的编码 ：http://www.w3.org/TR/2011/PR-CSS2-20110412/syndata.html#uri

规范原文是这么说的：

The format of a URI value is 'url(' followed by optional white space followed by an optional single quote (') or double quote (") character followed by the URI itself, 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 parentheses, white space characters, single 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中插入不可信数据，那么固然能够放心的省略引号。