在使用多个背景图时,只需把 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怎么同时插两张背景图片-css教程-PHP中文网