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

网络整理 - 07-27
建站学已经介绍过不少关于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;