CSS3：background-image可使用多背景图

2020-03-22 19:40:28

字体：大中小

来源：转载

供稿：网友

已经介绍过不少关于CSS3的的教程，大家可以自己搜索一下，本文我们将学习background-image，它可以让我们可使用多背景图。我们一般都是使用伪对象来实现的解决方案，如使用:first-letter，:first-line，:befor，:after等；又或是使用多个无意义标记堆叠来实现；又或是其它的什么方法。当然，方法没有错误，有的只是寻求最适合和最简单的。相信在CSS3 multiple background-image尚未出现之前，亦没有人会说自己的某某方法是最佳的，有的只是满足需求的一些变通方案（即使是在现在这种CSS3尚未被所有浏览器支持的情况下，是否要在项目中使用multiple background-image，也是你必须要考虑的问题)。所谓有需求就会有变化，也许正是基于这样或那样的考虑，background-image终于将多背景图纳入了自己势力的范围之内。有之前使用background-image的经验，多背景图对于你来说，完全是锦上添花，你甚至都不必花更多的时间去了解它，因为多背景图与之前的单一背景图并无大的区别，让我么来看看效果吧：两者的细微区别：单一背景图语法：background-image:url(); 多重背景图语法：background-image:url(),url(),url()... 你会发现多背景图只是在单一背景图的基础上，多添加一层背景图，就多设置一个url()，每个url()之间以半角逗号分隔。这种方式应该很常见了，比如说多字体间的间隔，不也正是这样么。组合与拆分写法：组合：.test{
background:url(1.jpg) no-repeat,url(2.jpg) no-repeat 25px 25px,url(3.jpg) no-repeat 50px 50px;
}拆分：.test{
background-image:url(1.jpg),url(2.jpg),url(3.jpg);
background-repeat:no-repeat;
background-position:0 0,25px 25px,50px 50px;
} 如上组合与拆分这两种写法是等效的，依据实际情况使用适合的写法。拆分写法中的background-repeat:no-repeat之所以可以缩写成这样，是因为该示例代码中的3个背景的平铺方式都为no-repeat。完整代码为： background-repeat:no-repeat,no-repeat,no-repeat;值得注意的地方：如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。如果存在着可比性的话，那么这个情况与元素的z-index正好相反，z-index默认下后者会覆盖前者，当然，其实这2者间不存在可比性，只是都有覆盖的情况，顺带一提html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：学习CSS的背景图像属性background_0

下一篇：CSS属性选择器的四种格式