這篇文章給大家分享的是有關(guān)Css中background怎么用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的達拉特網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

1. background-color

所有元素都能設(shè)置背景顏色。

background-color的默認值是transparent；也就是說，如果一個元素沒有指定背景顏色，那么背景就是透明的，這樣其祖先元素的背景才能可見。

2. background-image

所有元素都能設(shè)置背景圖像；

背景圖像可以設(shè)置多個，中間用逗號隔開；背景圖像會層疊，寫在前面的層次在上面。

3. background-repeat

repeat（默認）/no-repeat/repeat-x/ repeat-y

4. background-attachment

scroll（默認）/fixed

5. background-position

像素法：以圖像左上角為起點，第一個值為水平移動的距離，第二個值為垂直移動的距離；若只規(guī)定一個值，第二個值默認為50%。

百分比法：百分比同時應(yīng)用于圖像和元素，相應(yīng)的點重合進行定位。如果只指定一個百分數(shù)，意味著垂直方向為50%。

關(guān)鍵字法：top、right、bottom、left、center進行組合定位；若只規(guī)定一個值，第二個值默認為center。

注意：background-position可以為負值。

在默認情況下，背景顏色延伸到邊框下面，背景圖像在padding區(qū)域的左上角。

6. background-size

設(shè)置背景圖像的尺寸；默認值為auto。

像素法：第一個值設(shè)置寬度，第二個值設(shè)置高度；若只有一個值，第二個值為auto。

百分比法：以父元素的寬度和高度以基準來計算。

關(guān)鍵字cover，不改變圖像寬高比例，在水平和垂直方向都鋪滿整個元素，有可能導(dǎo)致一部分圖像溢出。

關(guān)鍵字contain，不改變圖像寬高比例，盡可能拉伸，直到某一方向鋪滿整個元素，有可能導(dǎo)致另一方向沒有鋪滿。

7. background-origin

定義背景圖像的初始位置

border-box，邊框左上角。

padding-box，padding區(qū)域左上角；默認值。

content-box，內(nèi)容區(qū)左上角。

8. background-clip

The CSS3 background-clip property specifies the painting area of the background.

The property takes three different values:

border-box - (default) the background is painted to the outside edge of the border

padding-box - the background is painted to the outside edge of the padding

content-box - the background is painted within the content box

（英文的解釋得比較清楚）

（英文都是從W3Schools Online搬運）

關(guān)于background-origin和background-clip，它們是相互獨立的，互不干擾。

關(guān)于background的CSS寫法，個人認為應(yīng)該邏輯明確、層次分明；具體而言：

background定義背景圖像，background-color定義背景顏色，background-clip定義背景顯示區(qū)域。

感謝各位的閱讀！關(guān)于“Css中background怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！