css背景設定

1 background-color；背景顏色

2 background-image；背景

3 background-repeat；背景重複

4 background-position；背景位置

5 background-size；背景尺寸

6 background-attachment；背景粘附

7 background（簡寫屬性）；

8 background-clip、background-origin、background-break（目前尚未得到廣泛支援）。

下面逐個介紹：

1 背景顏色 background-color；背景 background-image；

html**：

段落

css**：

*

p

圖示：

body元素的背景顏色設定：background-color: #333;

p元素的背景顏色設定：background-color: #ccc;

發現：在沒有設定邊框顏色的情況下，邊框的顏色與文字的顏色一致。實際上文字顏色color是前景色，邊框顏色在沒有設定的情況下與前景色一致。

2 背景 background-image；

css**：

*

p

圖示：

3 背景重複 background-repeat；

background-repeat: repeat-x;沿著x軸平鋪；background-repeat: repeat-y;沿著y軸平鋪；no-repeat不平鋪。

4 背景位置 background-position；

這個屬性有5個關鍵字值，分別是top、left、bottom、right和center，任意兩個組合都可以作為該屬性的值（預設top left)。當然top bottom這樣寫沒有什麼意義。如果只設定乙個值則第二個值預設為center。

也可用百分比表示 50% 50%表示水平垂直居中。

總結：1 ) 設定背景位置時可以使用三種值：關鍵字、百分比、絕對或相對單位的數值。可以使用兩個值分別設定水平和垂直位置。

2 ) 關鍵字指的順序不重要，left bottom和bottom left相同。為了設定的值在所有瀏覽器中都有效，最好不要混用關鍵字值與數字值。使3 ) 用數值（比如40% 30%）時，第乙個值表示水平位置，第二個值表示垂直位置。要是只設定乙個值，則將其用來設定水平位置，而垂直位置會被設為center。

4 ) 畫素之類的絕對單位數值就不一樣了。要是用畫素單位來設定位置，那麼的左上角會被放在距離元素左上角指定位置的地方。

5 ) 還可以使用負值。這樣就可以把的左上角定位到元素外部，從而在元素中只能看到部分。當然，給設定足夠大的正值，也可以把的右下角推到元素外部，從而在元素中也只能看到部分。位於元素外部的那部分不會顯示。

5 背景尺寸 background-size；

這個屬性有四種設定方法：

預設值是scroll，即背景隨元素移動。如果把它的值改為fixed，那麼背景不會隨元素滾動而移動。

background-attachment :fixed;最常用於給body元素中心位置新增淡色水印，讓水印不隨頁面滾動而移動。

7 background 簡寫背景屬性：

當背景顏色與背景都存在時，會將顏色覆蓋。

background-origin：控制背景定位區域的原點，可以設定為元素盒子左上角以外的位置。比如，可以設定以內容區左上角作為原點。

background-break：控制分離元素（比如跨越多行的行內盒子）的顯示效果。

9 linear-gradient() 漸變屬性：

線性漸變：

background: linear-gradient(#fff,#ccc); 預設從左到右漸變

background: linear-gradient(to left,red,#ccc); 設定從左到右漸變

background: linear-gradient(-45deg,#fff,#ccc); 設定從左上到右下

background: linear-gradient(#fff,#64d1dd 50%,#ccc);在50%處有個漸變點

圖示：

background: linear-gradient(#fff 20%,#64d1dd,#ccc 80%);兩個漸變點

圖示：

background: linear-gradient(#e86a43,#64d1dd 75%, #fff 75%, #e86a43);同一漸變點設定兩種顏色有突變效果。

圖示：

放射性漸變：

css背景設定

css背景設定

css背景設定

CSS 背景設定

相關推薦