關於CSS background的使用方法

下面為大家帶來一篇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:

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

小tips：

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

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

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！