在使用多个背景图时，首先把background-image属性的值用逗号隔开，列出需要用的图像；然后用background-repeat定义重复属性；最后用background-position定义每张小图的位置即可。
本教程操作环境：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;每用一个 url 定义一张图片的时候，就把这个图片的 位置 和 重复方式 都定义好了。
重点：
多个背景图会一层一层叠在一起，像是 Photoshop 里的图层。罗列背景图的顺序决定着哪个图像在上层。列出的第一个图像在最顶层，第二个图像在第二层，最后一个图像在最底层。以前面的代码为例，卷轴的上部（scrollTop.jpg）在卷轴的底部（scrollBottom.jpg）之上，而底部又在卷轴中部（scrollMiddle.jpg）之上。
以上就是css怎么同时插两张背景图片的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
418
收藏
