CSS3在原有CSS的基礎上，為背景添加了三個屬性，這三個屬性可以調整背景圖像的大小，設置背景圖像的顯示原點，設置背景圖像的顯示區域。本文小海前端（頭條号）就帶領大家一同學習與背景有關的CSS3屬性。

承接文章：CSS3中取值為顔色的屬性，系統了解顔色的原理，輕松掌握顔色取值

技術等級：中級 | 适合有一定的CSS基礎的人士閱讀。

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條号，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

本篇文章涉及到的CSS3屬性為：

• background-size

• background-origin

• backgroud-clip

一、定義多個背景圖像：

定義背景圖像依然采用我們非常熟悉的background-image屬性來實現。唯一不同的是：CSS3允許利用該屬性定義多個背景圖像。

使用background-image屬性定義多個背景圖片的格式如下所示：

background-image:url(Image1_URL),url(Image2_URL),url(Image3_URL),…

許多人肯定會想，這會是一種什麼效果呢？

從上述代碼中可以看出，background-image中所設置的多個背景圖片，是按照圖片的先後順序來排列顯示的，就好像Photoshop中的圖層一樣：01.jpg顯示在頂層，02.jpg顯示在中間層，03.jpg顯示在最底層。

由于background-image屬性在CSS3技術中可以添加多個圖片并進行層次顯示，所以background中的其他屬性也可以對應多張圖片取多個值，這樣就可以為每一張背景圖片設置不同的背景效果。

例如下列代碼：

#box{

width:600px; height:500px;

border:solid 1px #ff5857;

margin:100px auto 0;

background-image: url(../images/01.jpg),

url(../images/02.jpg),

url(../images/03.jpg);

background-repeat: no-repeat,repeat-x,no-repeat;

}

上述代碼的顯示結果如下圖所示。

二、指定背景圖像的原點位置：

CSS3利用background-origin屬性來設置背景圖像的原點位置。

CSS3 利用 background-origin 屬性來設置背景圖像的原點位置

該屬性的取值如下所示：

• border-box，背景圖片的原點位置為邊框區域開始的位置。

• padding-box，背景圖片的原點位置為填充區域開始的位置。

• content-box，背景圖片的原點位置為内容區域開始的位置。

要想展示這個屬性，必須首先設置一個<div></div>容器，并将該容器的padding和border的寬度設置為一個較大的值，讓容器的填充和邊框顯得較為明顯。

這裡，我們将#box的padding設置為50px，border的寬度設置為20px。CSS代碼如下所示。

#box{

width:600px; height:500px;

border:solid 20px #ff5857;

margin:100px auto 0;

box-sizing: border-box;

padding:50px;

}

然後利用background-image屬性設置一個圖片作為背景。

下圖為我們展示了将background-origin屬性設置為content-box時背景的顯示外觀。

背景圖像原點位于内容區域

上圖的效果實現需要在原有CSS代碼的基礎上添加下列内容：

#box{

background-image: url(../images/03.jpg);

background-origin: content-box;

background-repeat: no-repeat;

color:#ffff00;

}

大家可以将上述代碼中background-origin屬性的取值改為padding-box或border-box試一試。

三、背景圖像的顯示區域：

CSS3利用background-clip屬性來設置背景圖像的顯示區域。

CSS3 使用 background-clip 屬性來設置背景圖像的顯示區域

該屬性的取值如下所示：

• border-box，背景圖像從邊框區域開始顯示。

• padding-box，背景圖像從填充區域開始顯示。

• content-box，背景圖像從内容區域開始顯示。

将上述CSS代碼中的部分内容改為如下格式：

background-origin: padding-box;

background-clip: content-box;

這說明指定的背景圖像從填充的位置開始作為顯示原點，但是隻顯示内容的部分區域。最終的效果如下圖所示。

背景圖像隻顯示在内容區域

四、背景圖像的大小：

CSS3利用background-size屬性來設置背景圖像的大小。

CSS3 利用 background-size 屬性來設置背景圖像的大小

該屬性的取值如下所示：

• cover，保持背景圖像本身的寬高比，完全覆蓋所定義的背景區域。

• contain，保持背景圖像本身的寬高比，正好适應所定義的背景區域。

• l帶有單位的數值，設置背景圖像的大小為具體的數值。取值為兩個用空格隔開的數值，表示寬度和高度。

• l百分比，設置背景圖像的大小為父元素的百分比。取值為兩個用空格隔開的百分比，表示寬度和高度所占父元素的比例。

設置一個<div></div>容器，寬度為500像素，高度為400像素。設置一張圖片，寬度為700像素，高度為300像素。

CSS代碼如下所示：

#box{

width:500px; height:400px;

border:solid 1px #ff5857;

background-image: url(../images/05.jpg);

}

默認情況下，CSS技術是不會改變背景圖像的大小的。

為上述CSS代碼添加background-size屬性：

1、設置為cover：在保持背景圖像寬高比的前提下，用這張圖片完全覆蓋背景區域，那麼就隻能顯示背景圖像的一部分。

cover取值下的背景圖像

2、設置為contain：在保持背景圖像寬高比的前提下，用這張圖片适應背景區域，即在整個背景區域要顯示圖像的全部。因為這張圖像高度較小，因此在垂直方向上會發生平鋪。

contain取值下的背景圖像

3、設置為兩個100%值：圖像會完全占據背景區域，并不在考慮寬高比。

background-size:100% 100%;

小海聲明

在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條号，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟着學下去，我們共同将前端開發的路努力堅持的走下去。

文章預告

在本文的基礎上，小海前端（頭條号）會在下一篇文章中為大家講解一個利用CSS實現的“信紙效果”實例。主要用到的就是本文講到的背景類屬性，希望大家不要錯過。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部