CSS3实例分享之多重背景的实现(Multiplebackgrounds)

更新时间:2023-07-31 20:09:57 阅读: 评论:0

CSS3实例分享之多重背景的实现一年级日记30字
(Multiplebackgrounds)
CSS3的诞⽣为我们解决了这⼀问题,在CSS3⾥,通过background-image或者background可以为⼀个容器设置多张背景图像,也就是说可以把不同背景图象只放到⼀个块元素⾥。
⾸先我们来看⼀下语法吧:
多个背景图⽚的url之间使⽤逗号隔开即可,如果有多个背景图⽚,⽽其他属性只有⼀个(例如background-repeat只有⼀个),那么所有背景图⽚都应⽤该属性值。
下⾯我们就看⼀个例⼦吧:
这⾥我们要使⽤5张图⽚作为⼀个div容器的背景,我们来看⼀下代码:
HTML代码:
复制代码代码如下:
<div class="div1">
<a href="#" title=""></a>
</div>
写真拍摄CSS代码:
复制代码代码如下:
复语.div1{
三年级编写童话故事
margin:50px auto;
width:700px;
height:450px;
假如我有超能力border:10px dashed #ff00ff;
dell笔记本重装系统background-image:url(images/1.jpg),url(images/2.jpg),url(images/3.jpg),url(images/4.jpg),url(images/5.jpg);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
background-position:top left,top right,bottom left,bottom right,center center;
}
效果如下图:
在上⾯的代码中有这⼀句:
复制代码代码如下:
background-repeat:no-repeat;
写⼀个值就⾏了,效果是完全⼀样的。
一公顷等于多少平方千米>草原风光当然上⾯设置背景图⽚的各个属性时是分开写的,那么我们也可以把背景图⽚的各个属性写在⼀块,这时的CSS代码如下:
复制代码代码如下:
.div1{
...
background:url(images/1.jpg) no-repeat top left,
url(images/2.jpg) no-repeat top right,
url(images/3.jpg) no-repeat bottom left,
url(images/4.jpg) no-repeat bottom right,
url(images/5.jpg) no-repeat center center;
...
}
哦了,CSS3多种背景就是这么回事⼉,很简单吧。下⾯提供了完整的源码及⽰例,可以作为⼀个参考。

本文发布于:2023-07-31 20:09:57,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/89/1103459.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:背景   代码   草原   容器   设置   放到   属性
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图