0
点赞
收藏
分享

微信扫一扫

(转)css怎么一个DIV盒子同时插多张张背景图片

冬冬_79d4 2022-04-16 阅读 117
csshtml

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

举报

相关推荐

0 条评论