CSS必知！background復合屬性順序總結

css的背景總結

 

屬性	作用	值
background-color	背景顏色	預定義的顏色值/十六進制/RGB代碼
background-image	背景圖片	none（無背景圖，默認的） url（）使用絕對或相對地址指定背景圖像
background-repeat	背景平鋪	background-repeat:repeat|no-repeat|repeat-x|repeat-y repeat(默認) no-repeat背景圖像不平鋪 repeat-x背景圖像在橫向上平鋪 repeat-y背景圖像在縱向上平鋪
background-position	背景圖片位置	background-position：x y; 可以使用方位名詞或精確單位 length:百分數|由浮點數和單位標識符組成的長度值 position：top|bottom|left|right|centerl
background-attachment	背景圖像固定（背景圖片附着）	background-attachment:fixed|scroll scroll背景圖像隨對象內容滾動 fixed背景圖像固定

 

背景復合寫法：

background：背景顏色 背景圖片地址 背景平鋪 背景圖像滾動 背景圖片位置

【拓展】

1、背景色半透明

background:rgba(0,0,0,0.3)

• 最后一個參數alpha透明度，取值范圍在0-1之間
• 我們習慣把0.3的0省略掉，寫為background:rgba(0,0,0,.3)
• 注意：背景半透明是指盒子背景半透明，盒子里面的內容不受影響
• css3新增屬性，IE9+版本瀏覽器才支持，但實際開發中不太關注兼容性寫法可放心使用

2、背景圖片的大小

1 background-size:auto;/* 默認值，不改變背景圖片的高度和寬度 */
2 background-size:100px 50px;/* 第一個值為寬，第二個值為高，當設置一個值時，將其作為圖片寬度來等比縮放 */
3 background-size:10%;/* 0％~100％之間的任何值，將背景圖片寬高按百分比顯示，當設置一個值的時候同也將其作為圖片寬度來等比縮放 */
4 background-size:cover;/* 將背景圖片等比縮放填滿整個容器 */
5 background-size:contain;/* 將背景圖片等比縮放至某一邊緊貼容器邊緣 */