css3实现一个div设置多张背景图片及background-image属性
29491次浏览
以前做网页布局的时候，一个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-
也可以这么写：
background-image:url(&1.jpg&),url(&2.jpg&),url(&3.jpg&);
background-repeat: no-repeat, no-repeat, no-
background-position: 0 0, 200px 0, 400px 201
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
分别表示，从左往右，从右往左，从上往下，从下往上，从左上往右下，从……（都懂的，不全写了）
当然，也可以用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属性“今天就写到这里，有问题可以相互交流，加油！
如果您觉得本文的内容对您的学习有所帮助：
相关文章：css 背景图片平铺技巧
作者：佚名
字体：[ ] 来源：互联网 时间：03-20 23:16:38
使用css来设置背景图片同传统的做法一样简单，但相对于传统控制方式，css提供了更多的可控选项，我们先来看看最基本的设置图片的方法。xhtml代码：
&div id=&content&&
#content {
border:1px solid #000
使用css来设置背景图片同传统的做法一样简单，但相对于传统控制方式，css提供了更多的可控选项，我们先来看看最基本的设置图片的方法。xhtml代码： 代码如下:&div id="content"& &/div& css代码：代码如下: #content { border:1px solid #000 height:500 background-image:url(images/bg.GIF); } 网页中id为content的元素被我们设置了使用images文件夹下的bg.GIF作为背景，与传统表格式布局中的设置并无差别，在默认状态下，背景同样以平铺的方式出现在元素之中。然而使用css来控制背景当然不可能如此简单，实际上css为我们提供了更多用于控制背景的属性，包含可以控制元素是否需要平铺。改进后的代码： 代码如下:#content { border:1px solid #000 height:500 background-image:url(images/bg.GIF); background-repeat: repeat-x; } 加了background-repeat:repeat-x;之后,背景现在只在X轴即横向进行了平铺操作，纵向并没有进行平铺。这便是css对于背景细节的控制之一。background-repeat是针对背景平铺的属性设置，可选的值包含：代码如下:repeat 即默认方式，完全平铺背景； no-repeat 在X及Y轴方向均不平铺； repeat-x 横向平铺背景； repeat-y 纵向平铺背景。平铺选项是在网页设计中能够经常使用到的一个选项，例如网页中常用的渐变式背景。采用传统方式制作渐变式背景，往往需要宽度为1px的背景进行平铺，但为了使纵向不再进行平铺，往往高度设为高于1000px。采用repeat-x方式的话，只需要将渐变背景按需要高度设计就行不再需要使用超高的图片来平铺了。
大家感兴趣的内容
12345678910
最近更新的内容CSS实现背景图片居中
做网页经常会遇到让背景图片居中的问题，现在都是使用的Div+CSS布局，如何在这种布局方式下实现背景居中呢?我们通过CSS中最常用的background-image属性，来实现居中，这城用到了一句关键的代码：background-position:
　　做网页经常会遇到让背景图片居中的问题，现在都是使用的Div+CSS布局，如何在这种布局方式下实现背景居中呢?我们通过CSS中最常用的background-image属性，来实现居中，这城用到了一句关键的代码：background-position:定义背景图片不重复，这样这张图片就一直居中了，当然，不只是背景可以用，正常的情况显示的图片也可以这样居中。
CSS实现背景图片居中丨芯晴网页特效丨
本特效由 丨 收集于互联网，只为兴趣与学习交流，不作商业用途。
提示：可以先修改部分代码后再运行
（本文由 |芯晴网页特效 收集丨）
文章地址：/article-4102-1.html
------分隔线----------------------------
网页上的头部固定，但不随滚动条滚动的效果，在百度贴吧里整...
jQuery实现一个浮动层效果，随浏览器滚动条而滚动，并一直保持...
一款基于CSS3技术的冒泡提示效果，为了演示效果，生成了许多冒...
CSS3动画效果，分享一款使用transform和 transition 制作的纯CSS3动画...
纯CSS代码固定某个Div元素在网页底部显示，兼容各主流浏览器，...
收集了一些超漂亮的CSS3菜单按钮风格，个个精彩，都是圆角的，...}