宜宾网站建设公司

css如何同时插两张背景图片

这篇文章给大家分享的是有关css如何同时插两张背景图片的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

目前成都创新互联已为成百上千的企业提供了网站建设、域名、虚拟空间、成都网站托管、企业网站设计、莲花网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

在使用多个背景图时，首先把background-image属性的值用逗号隔开，列出需要用的图像；然后用background-repeat定义重复属性；最后用background-position定义每张小图的位置即可。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

在使用多个背景图时，只需把 background-image 属性的值用逗号隔开，列出想用的图像，然后用 background-repeat 定义重复属性，最后用 background-position 定义每张小图的位置。

HTML代码：

CSS代码：

background-image: url(images/scroll_top.jpg),
                  url(images/scroll_bottom.jpg),
                  url(images/scroll_middle.jpg);
 
background-repeat: no-repeat, no-repeat, repeat-y;
 
background-position: center top, center bottom, center top;

scroll_top.jpg

css如何同时插两张背景图片

scroll_middle.jpg

css如何同时插两张背景图片

scroll_bottom.jpg

css如何同时插两张背景图片

用 background-repeat 和 background-position 定义多个值时，定义的顺序分别对应 background-image 的顺序。

简写：

像上面定义的方式会比较让人困惑，尤其是后期需要重新排版或维护的时候就更烦了。所以很多Web设计师喜欢使用简写形式指定多个背景图。

CSS代码：

background: url(images/scroll_top.jpg) center top no-repeat,
            url(images/scroll_bottom.jpg) center bottom no-repeat,
            url(images/scroll_middle.jpg) center top repeat-y;

每用一个 url 定义一张图片的时候，就把这个图片的 位置 和 重复方式 都定义好了。

重点：

多个背景图会一层一层叠在一起，像是 Photoshop 里的图层。罗列背景图的顺序决定着哪个图像在上层。列出的第一个图像在最顶层，第二个图像在第二层，最后一个图像在最底层。以前面的代码为例，卷轴的上部（scrollTop.jpg）在卷轴的底部（scrollBottom.jpg）之上，而底部又在卷轴中部（scrollMiddle.jpg）之上。

感谢各位的阅读！关于“css如何同时插两张背景图片”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！


当前标题：css如何同时插两张背景图片
标题来源：http://hbruida.cn/article/ihiedd.html

其他资讯