实施多背景CSS3实例共享(多重背景)
CSS3的诞生为我们解决这个问题。在CSS3,通过背景图像或背景,我们可以在容器上设置许多背景图像,也就是说,我们可以把不同的背景图像转换成只有一个块元素。首先让我们看一下语法。
背景:{ } { }背景图像背景出身背景剪辑} { { } |背景重复| | | { } {背景背景大小|附件} { } |背景位置
多个背景图像的URL可以用逗号隔开。如果有多个背景图像,并且只有一个其他属性(例如后台重复只有一个),那么所有的背景图片都应用于这个属性值。
现在让我们看一个例子。
这里我们使用5张图片作为div容器的背景。让我们看看代码:
HTML代码:
复制代码代码如下所示:
CSS代码:
复制代码代码如下所示:
DIV1 {。
保证金:50px汽车;
宽度:700px;
身高:450px;
边境:10px冲# ff00ff;
背景图片:URL(图片 1),URL(图片 2),URL(图片 3),URL(图片4),URL(图片5);
背景重复:不重复,不重复,不重复,不重复,不重复;
背景位置:左上,右上,左下,右下,中中心;
}
效果如下:
在上面的代码中有这个:
复制代码代码如下所示:
后台重复:不重复;
写一个值是没问题的,效果完全一样。
当然,当设置背景图片的属性是单独写的时候,我们可以把背景图片的所有属性都写在一个地方。CSS代码如下所示:
复制代码代码如下所示:
DIV1 {。
…
背景:URL(图片 1)不重复左上角,
URL(图片 2)不重复右上角,
URL(图片 3)不重复左下角,
URL(图片 4)不重复右下角,
URL(图片 5)不重复中心;
…
}
哦,CSS3很多背景的情况。很简单,下面提供完整的源代码和示例,可以作为参考。