CSS3 背景(Background)

使用CSS3,您可以将多个背景应用于元素。

使用CSS3背景

CSS3提供了几个新属性来操纵元素的背景,例如背景剪切,多个背景以及调整背景大小的选项。

下一节将向您介绍CSS3的所有新背景功能,有关其他与背景相关的属性,请查看CSS背景教程。

CSS3 background-size属性

该background-size属性可用于指定背景图像的大小。在CSS3之前,背景图片的大小由图片的实际大小决定。背景图像的大小可以使用像素或百分比值,以及关键字来指定auto,contain和cover。不允许使用负值。

.box {
    width: 250px;
    height: 150px;
    background: url("images/sky.jpg") no-repeat;
    background-size: contain;
    border: 6px solid #333;
}
测试看看‹/›

提示:该background-size属性通常用于创建全尺寸背景图像,该背景图像将根据浏览器的视口或宽度的大小进行缩放。

CSS3 background-clip属性

background-clip属性可用于指定元素的背景是否延伸到边框中。该background-clip属性可以取三个值:border-box,padding-box,content-box。

.box {
    width: 250px;
    height: 150px;
    padding: 10px;
    border: 6px dashed #333;
    background: orange;
    background-clip: content-box;
}
测试看看‹/›

请参考CSS盒模型教程,以了解有关元素盒子的更多信息。

CSS3 background-origin属性

该background-origin属性可用于指定背景图像的定位区域。它可以采取相同的值background-clip属性:border-box,padding-box,content-box。

.box {
    width: 250px;
    height: 150px;
    padding: 10px;
    border: 6px dashed #333;
    background: url("images/sky.jpg") no-repeat;
    background-size: contain;
    background-origin: content-box;
}
测试看看‹/›

注意:如果background-attachment属性的值被指定为“fixed”,那么background-origin属性将被忽略。

CSS3多个背景

CSS3使您能够将多个背景添加到单个元素。背景相互层叠在一起。层数由background-imageor background速记属性中的逗号分隔值的数目确定。

.box {
    width: 100%;
    height: 500px;
    background: url("images/birds.png") no-repeat center,  url("images/clouds.png")  no-repeat center, lightblue;
}
测试看看‹/›

背景的逗号分隔列表中的第一个值(即background-image“ birds.png”)将显示在顶部,而最后一个值(即“ lightblue”颜色)将显示在底部。只有最后一个背景可以包含background-color。