CSS3 背景

使用 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;
}

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;
}

CSS3 多背景

CSS3 使您能够为单个元素添加多个背景。 背景相互叠加。 层数由 background-image 或 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。