在CSS裡面,每個元素盒子都可以想象成由兩個圖層組成。
前景層:內容(如文本或圖片)和邊框。
背景層:用實色填充(使用 background-color 屬性),也可以包含任意多個背景圖片(使用 background-image 屬性),背景圖片疊加在背景顏色之上。
在 CSS3 被浏覽器實現之前,只能在背景顏色上添加一張圖片。而現在,我們可以為背景圖層添加多張圖片(以及 CSS3 漸變)。
CSS背景屬性:
background-color
background-image
background-repeat
background-position
background-size
background-attachment
background(簡寫屬性)
background-clip、background-origin、background-break(目前尚未得到廣泛支持)
背景顏色
格式:background-color: 顏色值;
示例:background-color: #caebff;
背景圖片
格式:background-image:url(圖片路徑/圖片文件名);
示例:background-image:url(images/blue_circle.png);
默認情況下背景圖片會 以元素左上角為起點,沿水平和垂直方向重復出現,最終填滿整個背景區域。
背景重復
格式:background-repeat: repeat | repeat-x | repeat-y | no-repeat;
示例:background-repeat:repeat-x;
說明:
repeat 默認值,水平和垂直方向都重復,直至填滿元素的背景區域為止。
repeat-x 水平方向重復。
repeat-y 垂直方向重復。
no-repeat 任何方向上都不重復(只讓背景圖片顯示一次)。
背景位置
用於控制背景位置的 background-position 屬性,是所有背景屬性中最復雜的。
該屬性有5個關鍵字值,分別是 top、left、bottom、right 和 center,這些關鍵字中的任意兩個組合起來都可以作為該屬性的值。
background-position 屬性同時設定元素和圖片的原點。原點決定了元素和圖片中某一點的水平和垂直坐標。默認情況下,background-position的原點位於左上角。
第一種情況,使用關鍵字來設定位置。background-position屬性的默認值 top、left 控制著水平和垂直方向重復的起點。如修改 起點位置:p#center {background-position:center center;}(簡化寫法:background-position:center,設定一個關鍵值,則另一個也會取相同的值。),背景圖片就會以段落的中心點為起點。
第二種情況,使用百分比來設定位置。
示例:background-position:50% 50%;,再把 background-repeat 設定為 no-repeat,就能實現了圖片在背景區域內居中的效果。第一個值表示水平位置,第二個值表示垂直位置。要是只設定一個值,則將其用來設定水平位置,而垂直位置會被設為 center。
第三種情況,使用絕對或相對單位的數值。要是使用像素單位來設定位置,那麼圖片的左上角會被放在距離元素左上角指定位置的地方。另外,還可以使用負值,這樣可以把圖片的左上角定位到元素外部,從而在元素中只能看到部分圖片。當然也可以給圖片設定足夠大的正值,把圖片的右下角推到元素外部實現同樣的效果。
背景尺寸
background-size 是 CSS3 規定的屬性,用來控制背景圖片的尺寸。
可設定的值和含義如下:
50%:縮放圖片,使其填充背景區的一半。
100px 50px:把圖片調整到 100 像素寬,50 像素高。
cover:拉大圖片,使其完全填滿背景區;保持寬高比。
contain:縮放圖片,使其恰好適合背景區;保持寬高比。
注意:把很小的圖片拉大會導致圖片質量失真。
背景粘附
background-attachment屬性控制滾動元素內的背景圖片是否隨元素滾動而滾動。
屬性值有:
scroll。背景圖片隨元素移動。
fixed。背景圖片不會隨元素滾動而移動。
提示:background-attachment:fixed 最常用於給 body 元素中心位置添加淡色水印,讓水印不隨頁面滾動而移動。
簡寫背景屬性
示例:body {background:url(images/watermark.png) center #fff no-repeat contain fixed;}
說明:聲明中少寫了哪個屬性的值(比如沒寫 no-repeat),就會使用相應屬性的默認值( repeat)。
多背景圖片
CSS3 可以給元素背景添加多個背景圖片。
示例:
CSS Code復制內容到剪貼板
p {
background:
url(images/turq_spiral.png) 30px -10px no-repeat,
url(images/pink_spiral.png) 145px 0px no-repeat,
url(images/gray_spiral.png) 140px -30px no-repeat, #ffbd75;
}
背景漸變
漸變,就是在一定長度內兩種或多種顏色之間自然的過渡。
提示:漸變是 CSS 幫我們生成的背景圖片。添加漸變可以使用 background-image 屬性,也可以使用簡寫 background 屬性。
漸變分兩種:
線性漸變。從元素的一端延伸到另一端。
放射性漸變。從元素內一點向四周發散。
廠商前綴
為鼓勵浏覽器廠商盡早采用 W3C 的 CSS3 推薦標准,於是就產生了 VSP(Vendor Specific Prefixes,廠商前綴)的概念。
示例:
transform 屬性的標准語法是這樣的:
transform: skewX(-45deg);
由於這個屬性還沒有完全定案,為保證在大多數浏覽器以及它們的實驗性實現中能夠使用這個屬性,應該針對想要支持的浏覽器為該屬性添加 VSP。每個浏覽器只使用各自能理解的屬性聲明:
CSS Code復制內容到剪貼板
-moz-transform:skewX(-45deg); /* Firefox */
-webkit-transform:skewX(-45deg); /* Chrome 及 Safari */
-ms-transform:skewX(-45deg); /* 微軟 Internet Explorer */
-o-transform:skewX(-45deg); /* Opera */
transform:skewX(-45deg); /* 最後是 W3C 標准屬性 */
以下 CSS3 屬性必須加 VPS:
CSS Code復制內容到剪貼板
border-image translate
linear-gradient transition
radial-gradient background*
transform background-image*
transform-origin
> *針對背景圖片或漸變