背景相關屬性

背景顏色

在CSS中可以通過background-color:屬性設置標簽的背景顏色

取值:
具體單詞； rgb； rgba； 十六進制

快捷鍵: bc background-color: #fff;

背景圖片

在CSS可以通過background-image: url();設置背景圖片

注意點:
1. 圖片的地址必須放在url()中, 圖片的地址可以是本地的地址, 也可以是網絡的地址
2. 如果圖片的大小沒有標簽的大小大, 那么會自動在水平和垂直方向平鋪來填充
3. 如果網頁上出現了圖片, 那么瀏覽器會再次發送請求獲取圖片

快捷鍵: bi ? ?background-image: url();

背景平鋪

在CSS中可以通過background-repeat屬性控制背景圖片的平鋪方式的

取值:
1. repeat 默認, 在水平和垂直都需要平鋪
2. no-repeat 在水平和垂直都不需要平鋪
3. repeat-x 只在水平方向平鋪
4. repeat-y 只在垂直方向平鋪

應用場景:
1. 可以通過背景圖片的平鋪來降低圖片的大小, 提升網頁的訪問速度
2. 可以將多張圖片拼接成一張圖片

注意點: 背景顏色和背景圖片可以共存, 圖片會覆蓋顏色

快捷鍵： bgr background-repeat:

背景定位

在CSS中有一個叫做background-position:屬性, 就是專門用于控制背景圖片的位置

格式: background-position: 水平方向 垂直方向;

取值:
1. 具體的方位名詞
水平方向: left center right
垂直方向: top center bottom

2. 具體的像素
例如: background-position: 100px 200px;
一定要寫單位, 也就是一定要寫px
具體的像素是可以接收負數的

應用場景:
當圖片比較大的時候, 可以通過定位屬性保證圖片永遠居中顯示

快捷鍵: bp ?background-position: 0 0;

背景屬性連寫

和font屬性一樣, background屬性也可以連寫

背景屬性縮寫的格式：
background: 背景顏色 背景圖片 平鋪方式 關聯方式 定位方式;

注意點：background屬性中， 任何一個屬性都可以被省略

快捷鍵: bg+ ? ? background: #fff url() 0 0 no-repeat;

背景關聯

默認情況下背景圖片會隨著滾動條的滾動而滾動， 如果不想讓背景圖片隨著滾動條的滾動而滾動， 那么我們就可以修改背景圖片和滾動條的關聯方式

在CSS中有一個叫做background-attachment的屬性， 這個屬性就是專門用于修改關聯方式的

格式： background-attachment：scroll;

取值：
scroll 默認值， 會隨著滾動條的滾動而滾動
fixed 不會隨著滾動條的滾動而滾動

快捷鍵: ba ? ? background-attachment:;

插入圖片和背景圖片的區別

背景圖片僅僅是一個裝飾, 不會占用位置；插入圖片會占用位置

背景圖片有定位屬性, 所以可以很方便的控制圖片的位置；插入圖片沒有定位屬性, 所有控制圖片的位置不太方便

插入圖片的語義比背景圖片的語義要強, 所以在企業開發中如果你的圖片想被搜索引擎收錄, 那么推薦使用插入圖片

css精靈

CSS精靈圖是一種圖像合成技術, 全稱CSS Sprite

CSS精靈圖作用：可以減少請求的次數, 以及可以降低服務器處理壓力

如何使用CSS精靈圖：CSS的精靈圖需要配合背景圖片和背景定位來使用