从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这篇文章给大家分享的是有关css如何同时插两张背景图片的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
目前成都创新互联已为成百上千的企业提供了网站建设、域名、虚拟空间、成都网站托管、企业网站设计、莲花网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
在使用多个背景图时,首先把background-image属性的值用逗号隔开,列出需要用的图像;然后用background-repeat定义重复属性;最后用background-position定义每张小图的位置即可。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
在使用多个背景图时,只需把 background-image 属性的值用逗号隔开,列出想用的图像,然后用 background-repeat 定义重复属性,最后用 background-position 定义每张小图的位置。
HTML代码:
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如何同时插两张背景图片”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
咨询相关问题或预约面谈,可以通过以下方式与我们联系
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询400-028-6601
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图