CSS background彙總

本文更新版本 ，請跳轉

 

全部背景屬性都不能繼承。

 

1.    background-color

全部元素都能設置背景顏色。

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

 

2.    background-image

全部元素都能設置背景圖像；

背景圖像能夠設置多個，中間用逗號隔開；背景圖像會層疊，寫在前面的層次在上面。

 

3.    background-repeat

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

 

4.    background-attachment

scroll（默認）/fixed

 

5.    background-position

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

百分比法：百分比同時應用於圖像和元素，相應的點重合進行定位。若是隻指定一個百分數，意味着垂直方向爲50%。

關鍵字法：top、right、bottom、left、center進行組合定位；若只規定一個值，第二個值默認爲center。

注意：background-position能夠爲負值。

 

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

 

6.    background-size

設置背景圖像的尺寸；默認值爲auto。

像素法：第一個值設置寬度，第二個值設置高度；若只有一個值，第二個值爲auto。

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

關鍵字cover，不改變圖像寬高比例，在水平和垂直方向都鋪滿整個元素，有可能致使一部分圖像溢出。

關鍵字contain，不改變圖像寬高比例，儘量拉伸，直到某一方向鋪滿整個元素，有可能致使另外一方向沒有鋪滿。

 

7.    background-origin

定義背景圖像的初始位置

border-box，邊框左上角。

padding-box，padding區域左上角；默認值。

content-box，內容區左上角。

 

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搬運）

 

關於background-origin和background-clip，它們是相互獨立的，互不干擾。

 

關於background的CSS寫法，我的認爲應該邏輯明確、井井有條；具體而言：

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

（我的看法，僅供參考）

 

Full Size Background Image

If we want to have a background image on a website that covers the entire browser window at all times.

The requirements are as follows:

• Fill the entire page with the image (no white space)
• Scale image as needed
• Center image on page
• Do not cause scrollbars

The following example shows how to do it; Use the html element (the html element is always at least the height of the browser window). Then set a fixed and centered background on it. Then adjust its size with the background-size property:

1 html {
2     background: url(img_flower.jpg) no-repeat center fixed; 
3     background-size: cover;
4 }

 

小tips：

利用背景圖像的水平平鋪，實現波浪式的邊框效果。

（目前只有想法，還沒找到符合需求的圖像。）