所有背景屬性都不能繼承。
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:
小tips:
利用背景圖像的水平平鋪,實現波浪式的邊框效果。
(目前只有想法,還沒找到符合需求的圖像。)
以上這篇CSS background全部匯總就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。