CSS背景相關知識
背景共分為以下8個屬性
background-color:背景顏色
background-image:背景圖片
background-repeat:背景圖片重復
background-position:背景圖片位置
background-size:背景圖片尺寸
background-attachment:背景圖片是否固定不動
background-clip:背景覆蓋區
background-origin:背景圖片覆蓋區
其中常用的是
background-color，background-image，background-repeat，background-position
background-color:
顏色名稱，如:background-color:red(背景顏色是紅色)
-
十六進制背景色，如:background-color:#ff0000;/background-color:#f00;(#後面有三個字符說明每兩個是相同的，也就是#f00相當於#ff0000)
-
rgb顏色，這裏如果是rgba，a表示透明程度，0表示全透明，1表示完全不透明，如：background-color:rgba(255,0,0,0.5);
-
transparent,透明，如：background-color:transparent;
background-image:
-
url圖片地址，可以多個圖片,如：background-image:url(img/a.jpg),url(img/b.jpg)
-
none，不顯示背景圖像
background-image與background-color聯合使用，保證在出現以下幾種情況下，有背景色可以填充
(1)圖片出不來(可能路徑錯，圖片不存在)
(2)圖片被誤刪除
(3)圖片在不平鋪的情況下覆蓋不了整個盒子
background-repeat:
-
repeat:水平和垂直方向都重復圖像，如：background-repeat:repeat;
-
repeat-x:水平方向重復圖像
-
repeat-y:垂直方向重復圖像
-
no-repeat:圖像不重復
background-position：
-
位置名字組合定位，只寫一個默認另一個為居中，如：background-position:right bottom;/background-position:center;
-
百分比位置，如:background-position:20% 20%；
-
具體像素位置，如：background-position:20px 20px;
background-attachment:
-
scroll:背景圖像相對於頁面不動，會隨著網頁的滾動而移動，默認
-
fixed:背景圖像相對於瀏覽器窗口不動，內容滾動的時候背景圖像不動，如：background-attachment:fixed;
background-size：
-
像素大小，只寫一個默認另一個為auto，如：background-size:200px 100px;
-
百分比大小，如：background-size:60% 60%;
-
cover:背景圖像覆蓋當前元素的所有背景區域，如:background-size:cover;
-
contain:圖像顯示最大且剛好完全顯示，一般不能覆蓋全部背景區
background-clip：
-
border-box:背景覆蓋到邊框區域，如：background-clip:border-box;
-
padding-box:背景覆蓋到padding區域
-
contect-box:背景只覆蓋到content區域
background-origin：
-
border-box:背景圖像的起始位置在邊框處，如:background-origin:border-box;
-
padding-box:背景圖像的起始位置從padding處開始
-
content-box:背景圖像的起始位置從content處開始
該屬性從ie9開始支持
background簡寫：(中間用空格隔開)
background:(background-color)(background-image)(background-repeat)(background-position)(background-size)
例：
.box {
height: 400px;
background-color: #e8e8e8;
background-image: url(‘www.baidu.com/XXXX.jpg‘);可以加單引號也可以不加
background-repeat: no-repeat;
background-position: center center;
background-size: 100px 100px;
}
可以簡寫為:
.box {
height: 400px;
background: #e8e8e8 url(‘www.baidu.com/XXXX.jpg‘) no-repeat center center/100px 100px;
}
CSS背景相關知識