CSS3实例分享之多重背景的实现(Multiple backgrounds)(css示范例子)

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种工作——