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

提示： 该 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-origin 如果值属性被忽略，如果 background-attachment 属性指定为 'fixed'。

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。