前端學習——基礎篇
四、CSS學習
4.6、背景
作用在內容、內填充、邊框
4.6.1、背景顏色 background-color屬性
默認背景顏色透明色transparent
屬性值可以是：關鍵詞、十六進制色值、rgb顏色模式、rgba顏色模式
4.6.2、背景圖片 background-image屬性
語法：
background-image: url(圖片地址);
background-image: none; 沒有背景圖片，默認值
特性：
- 背景圖片不占位
- 默認在水平方向和垂直方向重復、平鋪，鋪滿整個盒子
- 背景圖是網頁的裝飾，起美化作用
- 寫在樣式中(不會被搜索引擎搜索到)
4.6.3、背景圖是否重復 background-repeat屬性
- background-repeat: repeat; 默認值 背景圖在水平方向和垂直方向重復
- background-repeat: no-repeat; 不重復
- background-repeat: repeat-x; 沿着水平方向重復
- background-repeat: repeat-y; 沿着垂直方向重復
4.6.4、背景圖定位屬性 background-position屬性
語法：
background-position: x y;
屬性值：
- 關鍵詞：left|center|right top|center|bottom 如果有1個關鍵詞，另一個關鍵詞默認為center
- 數值：px|% 如果是兩個值，第一個表示水平方向，第二個表示垂直方向;如果只有一個值，表示水平方向，垂直方向居中（50%）
4.6.5、背景簡寫屬性 background屬性
background: background-color background-image background-repeat background-position;
/*引用一張背景圖*/
background: #fff url(images/3_04.jpg) 27px 73px no-repeat;
/*引用多張背景圖直接用逗號隔開即可*/
background: url(images/2_07.jpg) 15px 99px no-repeat , url(images/2_08.jpg) 373px 99px no-repeat,url(images/2_09.jpg) 731px 99px no-repeat;