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。