background-image属性(CSS设置背景图像)

发布时间：2021-06-12 17:37 所属分类：热门主题浏览次数：

　　background-image属性

　　background复合特点是个很复杂的特点，把戏非常多，比较奇特的是css3

　　中支撑多图片布景了，这篇文章先讲讲background-image特点，其他布景特点会在后续的文章归纳总结。

　　一、最基本的状况是指定一张图片的url作为布景：

　　作用如下（浏览器默许布景图片重复平铺）：

　　二：将突变指定为布景：

　　background-image:linear-gradient(tolefttop,red,blue);

　　作用如下（由右下角到左上角，由红色突变到蓝色）：

　　除了线性突变，还有径向突变，径向突变也便是由中心向外辐射的突变。现代浏览器（包含ie10+）支撑。

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

　　MDN#linear-gradient，

　　MDN#radial-gradient。

　　三、运用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编码而不凭借其他工具：

　　1、一个办法是根据HTML5的FileReader目标的readAsDataURL()办法，下面便是一个读取input上传的图片然后展现出来的比方，this.result便是图片的base64编码信息。　　document.getElementById("file").onchange=function(){varreader=newFileReader();

　　reader.readAsDataURL(this.files[0]);

　　reader.onload=function(e){

　　document.body.innerHTML='this.result+'"alt="">'}

　　}

　　2、还有一个办法是运用HTM5的canvas中图片处理的toDataURL()办法，我之前的一篇文章便是讲如何运用canvas处理图画数据的办法：

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

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

　　3、还有个更懒的办法便是凭借firefox、chrome浏览器自带的开发工具（经过F12呼唤）检查图片的base64编码。

　　具体办法如下，灰常简略：

　　firefox：首先定位到要检查编码的图片，在inspector里边右键该图片，挑选下图红框中的copyimagedataurl，就能copy该图片的base64编码，粘贴运用即可。

　　chrome：相同要定位到要检查编码的图片，在elements里边右键该图片，挑选下图红框中的openlinkinresourcespanel，切换到resources板块，右键该图片，挑选copyimageasdataurl就能copy该图片的base64编码，粘贴运用即可。

　　图（1）：

　　图（2）：

　　是不是超级简略！

　　四、总算讲到多图片布景了：

　　在CSS3稳定版草案中对多图片布景制定了标准：background-image特点能够经过","来分隔多个图画url设置多个布景图画。

　　每一个图画布景就创建了一个布景层（backgroundlayer），有几个布景图片就界说了几个层。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:10pxsolidrgb(125,125,123);background-color:#bff;background-image:url(halfRombes.png),url(MicrobiaMat.png),url(Stairs.png),url(Stars.png);background-position:lefttop,rightbottom,righttop;background-repeat:no-repeat,repeat-x;

　　}

　　是的，background-position,background-origin,background-repeat等特点的值也要相应地进行设置，也是用","分离隔，一一对应声明的多张图片。假如某个特点设置了过多的值，则放弃排在后面的多余的值；假如某个特点没有供给满足的值，就重复使用该特点的值列表。作用如下：

　　咱们来逐条分析：

　　由于排在布景图片列表前面的图片会在上层，而后面的图片在基层，所以看到三角形的图在最上面，五角星的图在最下面。

　　position只给了3个值，所以后面的图会重复position列表的值，所以实际上是：lefttop,rightbottom,righttop,lefttop;

　　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:10pxsolidrgb(125,125,123);background-color:#bff;background-image:url(halfRombes.png),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAeCAYAAAAcni9KAAAAaElEQVQ4jcXTMQ4AEBAEQH/yJ69Vq31CTSWRC26dDcVVu1NtzvkQq+VcyuUDPMUpFwJEce9yoIbHHg+usOxwocSznA87XmV2aH4rbbM3ENmVB5FdeXC3qcT3UEMS30EUjdgOTxH0Vrtri9j3uTwNEWIAAAAASUVORK5CYII=),url(Stairs.png),linear-gradient(tolefttop,red,blue);background-position:lefttop,rightbottom,righttop;background-repeat:no-repeat,repeat-x;

　　}