scroll_middle.jpg
scroll_bottom.jpg
用 background-repeat 和 background-position 定义多个值时,定义的顺序分别对应 background-image 的顺序。
简写:
像上面定义的方式会比较让人困惑,尤其是后期需要重新排版或维护的时候就更烦了。所以很多Web设计师喜欢使用简写形式指定多个背景图。
CSS代码:
1 2 3 |
|
每用一个 url 定义一张图片的时候,就把这个图片的 位置 和 重复方式 都定义好了。
重点:
多个背景图会一层一层叠在一起,像是 Photoshop 里的图层。罗列背景图的顺序决定着哪个图像在上层。列出的第一个图像在最顶层,第二个图像在第二层,最后一个图像在最底层。以前面的代码为例,卷轴的上部(scrollTop.jpg)在卷轴的底部(scrollBottom.jpg)之上,而底部又在卷轴中部(scrollMiddle.jpg)之上。
以上就是css怎么同时插两张背景图片的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者