最新消息: 关于Git&GitHub 版本控制你了解多少?
您现在的位置是:群英 > 开发技术 > web开发 >
css中怎样实现同时添加两张背景图片?
PHP中文网发表于 2021-09-28 17:58 次浏览

    css中怎样实现同时添加两张背景图片?有时候我们需要使用到多个背景图,这篇文章我们就以添加两种背景为例,来看看CSS是怎样实现插入多个背景图的,感兴趣的朋友就继续往下看吧。

    本教程操作环境: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实现同时添加两张背景图片的方法啦,需要的朋友可以借鉴参考,想要了解更多CSS的使用技巧,请关注群英网络其它相关文章。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
相关信息推荐