css怎么同时插两张背景图片

112 阅读 0 评论 74 点赞

我是靠谱客的博主喜悦鞋垫，最近开发中收集的这篇文章主要介绍css怎么同时插两张背景图片，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

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

HTML代码：

<div></div>
登录后复制

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

scroll_middle.jpg

scroll_bottom.jpg

用 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;
登录后复制

以上就是css怎么同时插两张背景图片的详细内容，更多请关注靠谱客其它相关文章！