css3实现⼀个div设置多张背景图⽚及background-image
属性实例演⽰
引⼦
以前做⽹页布局的时候，⼀个div只能设置⼀张背景图⽚，设置多个背景的话，要⽤多个div嵌套才能实现，这样兼容性⽐较好。若您的⽹站要求兼容浏览器低版本，建议⽤这种⽅法。css3的出现，解决了⼀个div只能设置⼀个背景的问题，使⼀个div 可以设置多个背景图⽚。background-image还可以设置线性渐变，等效果。
题外话
关于css3的background，功能很强⼤，有很多属性，像background-size等等，这些属性都可以写⼀篇博客来讲述。关于css3background的其他属性，后⾯会出博客来单独讲述！
CSS3/CSS1 background-image 属性
语法:
background-image：<bg-image> [ , <bg-image> ]*
<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>
默认值：none
取值：
none：⽆背景图。
< url >：使⽤绝对或相对地址指定背景图像。
< linear-gradient>：使⽤线性渐变创建背景图像。（CSS3）
< radial-gradient>：使⽤径向(放射性)渐变创建背景图像。（CSS3）
< repeating-linear-gradient>：使⽤重复的线性渐变创建背景图像。（CSS3）
< repeating-radial-gradient>：使⽤重复的径向(放射性)渐变创建背景图像。（CSS3）
说明：
设置或检索对象的背景图像。
如果设置了background-image，同时也建议作者设置background-color⽤于当背景图像不可见时保持与⽂本⼀定的对⽐。
对应的脚本特性为backgroundImage。
兼容性：
IE8及更早浏览器不⽀持CSS3 background-image，即不⽀持多背景和使⽤渐变作为背景图像。
IE9不⽀持CSS3新增参数值：< linear-gradient > | < radial-gradient > |< repeating-linear-gradient > | < repeating-radial-gradient >作为背景图像。
Opera11.50-11.51不⽀持CSS3新增参数值：< radial-gradient > |< repeating-radial-gradient >作为背景图像。
写法：
css3设置多张背景图⽚
css3设置多张背景图⽚，可以如下写：
background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat,
url("haoroomsCSS2_s.jpg") 200px 0 no-repeat,
url("haorooms.jpg") 400px 201px no-repeat;
也可以这么写：
background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 0 0, 200px 0, 400px 201px;
css3背景渐变
标准写法
background-image: linear-gradient(  [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );
上⾯这种CSS语法我们经常见到，可能有⼈看不懂具体的意思，其实上⾯的些符号含义与正则表达式有很多⼀致之处：
[]在正则中表⽰⼀个字符类，这⾥，你可以理解为⼀个⼩单元。
|表⽰候选。也就是“或者”的意思，要么前⾯的，要么就后⾯的。
为量词，表⽰0个或1个，⾔外之意就是，你可以不指定⽅向，直接渐变⾊⾛起。例如：
background:linear-gradient(red, yellow);
就是从上往下的红黄条纹效果。
+也是量词，表⽰1个或者更多个。因此，终⽌颜⾊是不可缺少的。例如：linear-gradient(red)是酱油命，⽩板。
<>中的是关键字，主要是让开发⼈员知道这⾥应该放些什么内容。
⽔平渐变
{background-image:linear-gradient(left, red 100px, yellow 200px);}
效果如下图：
左上⾓渐变
那从(100px, 100px)到(200px, 200px)应该就是从左上⾓开始，写法如下：
{background-image:linear-gradient(left top, red 100px, yellow 200px);}
效果如下
渐变⽅向写法组合：
left, right, top, bottom, left top, left bottom, right top, right， bottom
分别表⽰，从左往右，从右往左，从上往下，从下往上，从左上往右下，从……（都懂的，不全写了）html animation属性
当然，也可以⽤angle⾓度来写！
{background-image:linear-gradient(-45deg, red 100px, yellow 200px);}
具体的样式⼤家可以尝试着写⼀下，看⼀下！很多情况下，⽤了才知道！
注意：有不少效果加了-webkit前缀以及-moz前缀会展现的不⼀样！
例如：
background-image:-webkit-linear-gradient(-45deg, red, yellow)
与
background-image:linear-gradient(-45deg, red, yellow)
在Chrome浏览器下的渐变⽅向居然是相反的！但是45deg是正常的。Firefox浏览器下也是如此，有前缀和没有前缀⽅向相反！咋回事？
原因很简单，CSS3⽬前还是草案阶段！
从浏览器去掉前缀前后的变化可以推测，之前，W3C的渐变坐标是与photoshop中⼀致的，但是，后来，由于某些原因，修改了。
⾄于什么原因，根据草的查，可能与下⾯⼏个关键字之⼀有联系：animation/transition动画、write-mode书写⽅向、flex box模型、以及radial-gradient渐变等。在这⾥就不深⼊研究了！
前缀兼容
基本的写法如下：
background-image: linear-gradient(top, #fff, #dededc);
但是为了兼容，有时候要写多个前缀，变成如下：
background-image: -ms-linear-gradient(top, #fff, #dededc);
background-image: -moz-linear-gradient(top, #fff, #dededc);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dededc));
background-image: -webkit-linear-gradient(top, #fff, #dededc);
background-image: -o-linear-gradient(top, #fff, #dededc);
background-image: linear-gradient(top, #fff, #dededc);
关于”css3实现⼀个div设置多张背景图⽚及background-image属性“今天就写到这⾥，有问题可以相互交流，加油！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。