【CSS】同时使用多个背景图

最新推荐文章于 2023-03-16 17:58:28 发布

原创最新推荐文章于 2023-03-16 17:58:28 发布 · 464 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在CSS中设置多重背景图，包括如何定义图片的位置、重复方式以及层叠顺序。通过简化的语法，可以更方便地管理和调整背景图。

0003.jpg

image.png

上面这张图是由3个小图片组合而成的。

在使用多个背景图时，只需把 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

image.png

scroll_middle.jpg

image.png

scroll_bottom.jpg

image.png

用 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）之上。

HTML与CSS 目录：HTML与CSS

上一篇：【CSS】背景基础知识

下一篇：【CSS】渐变背景（background-image）