使用CSS3书写多背景时注意的问题

在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个属性用的比较多