CSS背景和精靈圖

如何設置背景圖片？

1.在CSS中有個叫作background-image：url()；的屬性，就是專門用於設置背景圖片的。
2.注意點：
1）圖片的地址必須放在url()中，圖片的地址能夠是本地的地址，也能夠是網絡的地址。
2）若是圖片的大小沒有標籤的大小大，那麼會自動在水平和垂直方向平鋪和填充。
3）若是網頁上出現了圖片，那麼瀏覽器會再次發送請求獲取圖片。

背景屬性

1.背景平鋪屬性：background-repeat屬性。
1）應用場景：就是能夠經過背景圖片的平鋪來下降圖片的大小，提高網頁的訪問速度。
2.背景定位屬性：background-position屬性就是專門用來控制背景圖片的位置。
1）格式：background-position：水平方向 垂直方向；
2）應用場景：就是在網頁上要顯示一張背景圖片，因爲每一個電腦的分辨率不同的問題，通常會準備一張很大的圖片，經過定位可使最核心的最重要的內容一直居中顯示(background-position：center top；) 。
3）屬性縮寫格式：
3.1）background：背景顏色 背景圖片 平鋪方式 關聯方式 定位方式；
3.2）注意點：background屬性裏面的任何一個屬性均可以被省略。
3.3）什麼是關聯方式？默認狀況下背景圖片會隨着滾動條的滾動而滾動，若是不想讓背景圖片隨着滾動條滾動而滾動，那麼咱們就能夠修改背景圖片和滾動條的關聯方式（屬性值：fixed可解決）。
3.4）如何修改背景關聯方式？在CSS中有一個background-attachment的屬性，這個屬性就是專門用於修改關聯方式的。

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

1.背景圖片僅僅是一個裝飾，不會佔用位置、插入圖片會佔用位置。
2.背景圖片有定位屬性，因此能夠很方便的控制圖片的位置、插入圖片沒有定位屬性，因此控制圖片的位置不太方便。
3.插入圖片的語義比背景圖片的語義要強，因此在企業開發中若是你的圖片想被搜索引擎收錄，那麼推薦使用插入圖片。
4.應用場景：若是想用多張圖片拼接成一張圖片，就用多個div嵌套，而後再經過背景圖片定位功能進行合成。

精靈圖

1.什麼是精靈圖？
CSS精靈圖就是一種圖像合成技術。
2.CSS精靈圖的做用？
能夠減小請求的次數，以及能夠下降服務器處理壓力。
3.如何使用CSS精靈圖？
CSS精靈圖須要配合背景圖片和背景定位來使用。

 

 

 

 

來自爲知筆記(Wiz)