在CSS3中 我们可以添加多背景 就是多重背景叠加的效果 常用在背景 按钮 等图片上面 比如按钮上面的某个小图片不同 但是按钮整个背景是一样的
例(ps：例子可能不太好,因为小图片插入进去也可以，不一定非要用多背景。这里我们只介绍多背景写法，就不管那么多了)
多背景要注意的是写法问题 位于最前面的图片要写在第一层
例子 假如图片是ico.png 按钮背景是bg.png
写法一（错误）:
.btn1{ 77px; height:33px; background:url(themes/img/bg.jpg) no-repeat,url(themes/img/ico.png) no-repeat;} <div class="btn1"></div>
显示效果
我们发现 小按钮没显示出来 因为我们把背景写在了第一层 所以导致背景盖住了小图片 所以我们要修改代码 颠倒下背景位置的写法、
写法二
.btn1{ 77px; height:33px; background:url(themes/img/ico.png) no-repeat,url(themes/img/bg.jpg) no-repeat;}
<div class="btn1"></div>
显示效果
这样小图标位于了第一层才不会被挡住。
所以书写多背景时要注意背景层的写法 尤其是刚学的人容易出现写了后没效果 比较纠结的问题
当然在背景层后面可以继续接上背景颜色 这里可以写纯色和raba都行。但是不能写渐变。
对于写法二 我们实现的理想的效果 但做过iphone开发的知道 上面那种多背景写法在低版本iso上面是不兼容的。
所以写法二也是有问题的 我们要修改上面的代码
正确的代码是
.btn1{ 77px; height:33px; background-image:url(themes/img/ico.png),url(themes/img/bg.jpg); background-repeat:no-repeat,no-repeat;}
要分开写 才能兼容低版本
这里常用的参数是
background-image
background-repeat
background-position
background-size
一般这4个属性用的比较多