【叢林】CSS background 背景淺談

定義和用法

基本屬性：color, image, position, repeat

背景顏色 background-color

值爲顏色值或transparent兩者選其一,默認值是transparent（透明）。

• 顏色值能夠爲16進制顏色碼或者RGB顏色值，也能夠是英文代碼。不建議使用英文代碼，不一樣瀏覽器對不一樣顏色代碼處理的效果有可能不一樣。
• 設置背景顏色做爲後備也是很重要的。背景顏色在各處都獲得了支持，而背景梯度等更奇異的特性只在較新的瀏覽器中獲得支持，加上背景圖像可能因爲某種緣由沒法加載。所以，設置基本的背景顏色和指定這些特性是一個好主意，所以不管如何，元素的內容都是可讀的。

背景圖像 background-image

指定顯示的背景圖片，用url()設置路徑。

• 默認的圖片重複方式爲水平垂直皆重複。

背景重複 background-repeat

指定背景圖像如何重複的，默認值是repeat（一直重複，直到整個元素的背景被填充）

值	描述
no-repeat	不重複
repeat	垂直和水平都重複
repeat-x	X軸方向（水平）重複
repeat-y	Y軸方向（垂直）重複

背景位置 background-position

指定定位背景圖片的位置，原點爲左上角（0,0）。

• 可輸入兩個值表明 X 軸和 Y 軸，也能夠只輸入一個值。
• 可輸入長度值（px等）、相對值（rem等）、百分比、關鍵字（left，center，right,top，bottom）
• 若只輸入一個值，則表明 X 軸的值，Y 軸變成center
• 值能夠混搭，如background-position:9px top;

額外屬性

背景滾動 background-attachment

指定當內容滾動時背景如何滾動。

值	描述
scroll	默認值。滾動，背景圖隨着頁面的滾動而移動。
fixed	固定，當頁面的其他部分滾動時，背景圖像不會移動。

待研究：
https://developer.mozilla.org...