首页 > web前端 > css教程 > 正文

css怎么同时插两张背景图片

醉折花枝作酒筹
发布: 2023-01-07 11:45:36
原创
13536 人浏览过

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

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

css怎么同时插两张背景图片

scroll_middle.jpg

css怎么同时插两张背景图片

scroll_bottom.jpg

css怎么同时插两张背景图片

用 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怎么同时插两张背景图片的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
css
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板