css怎么同时插两张背景图片-木庄网络博客

2022-02-08 02:07:36 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者醉折花枝作酒筹，侵删。

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

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

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

HTML代码：

1	`<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;