位置: 编程技术 - 正文
CSS3的诞生为我们解决了这一问题,在CSS3里,通过background-image或者background可以为一个容器设置多张背景图像,也就是说可以把不同背景图象只放到一个块元素里。
首先我们来看一下语法吧:
background : [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-attachment] | [background-position]
多个背景图片的url之间使用逗号隔开即可,如果有多个背景图片,而其他属性只有一个(例如background-repeat只有一个),那么所有背景图片都应用该属性值。
下面我们就看一个例子吧:
这里我们要使用5张图片作为一个div容器的背景,我们来看一下代码:
HTML代码:
CSS代码:
效果如下图:
在上面的代码中有这一句:
写一个值就行了,效果是完全一样的。
当然上面设置背景图片的各个属性时是分开写的,那么我们也可以把背景图片的各个属性写在一块,这时的CSS代码如下:
哦了,CSS3多种背景就是这么回事儿,很简单吧。下面提供了完整的源码及示例,可以作为一个参考。
推荐整理分享CSS3实例分享之多重背景的实现(Multiple backgrounds)(css示范例子),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:css例子,css网页实例,css示范例子,css实战案例,css实战案例,如何使用css3,css实例教程,css示例,内容如对您有帮助,希望把文章链接给更多的朋友!
用css截取字符的几种方法详解(css排版隐藏溢出文本) 方法一:divstyle="width:px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"任意长度的字符串/div说明:优点是内容可以为任何HTML元素,包括超链接和图片等
页面遮罩层,并且阻止页面body滚动。bootstrap模态框原理 实现思路:1、需要有一个层将body遮住,放在body上方。2、修改body的overflow属性值为:hidden废话不多说了,将关键代码贴出来了,兼容火狐,谷歌,ie遮
CSS可以做的几个令你叹为观止的实例分享 在我写你未必知道的JavaScript和CSS交互的5种方法一文时,人们对于JavaScript和CSS是如何重叠的感到惊讶。今天,我将重点强调你能用CSS完成的7种工作——
标签: css示范例子
本文链接地址:https://www.jiuchutong.com/biancheng/372112.html 转载请保留说明!友情链接: 武汉网站建设