這次帶給大家CSS的背景與精靈圖，使用CSS的背景與精靈圖的注意事項有哪些，下面就是實戰案例，一起來看一下。
1.如何設定標籤的背景顏色?
在CSS中有一個background-color:屬性, 就是專門用來設定標籤的背景顏色的
取值:
具體單字 rgb rgba 十六進位
快捷鍵:
bc background-color: #fff;
2.如何設定背景圖片?
在CSS中有一個叫做background-image: url();的屬性, 就是專門用來設定背景圖片的
快速鍵:
bi background-image: url();
注意點:
1.圖片的位址必須放在url()中, 圖片的位址可以是本地的位址, 也可以是網路的-
位址
2.如果圖片的大小沒有標籤的大小大, 那麼會自動在水平和垂直方向平鋪來填充
3.如果網頁上有圖片, 那麼瀏覽器會再次發送請求獲取圖片的資料
3.背景平鋪屬性
在CSS中有一個background-repeat屬性, 就是專門用來控制背景圖片的平鋪方式的
取值:
repeat 預設, 在水平和垂直都需要平鋪
no-repeat 在水平和垂直都不需要平鋪
repeat-x 只在水平方向平鋪
repeat-y 只在垂直方向平鋪
快速鍵
bgr background-repeat:
#應用程式場景:
#可以透過背景圖片的平鋪來降低圖片的大小, 提升網頁的存取速度
4.背景定位屬性
1.如何控制背景圖片的位置?
在CSS中有一個叫做background-position:屬性, 就是專門用來控制背景圖片的位置
2.格式:
background-position: 水平方向垂直方向;
# 3.取值
3.1具體的方位名詞
水平方向: left center right
垂直方向: top center bottom
3.2具體的像素
例如: background- position: 100px 200px;
記住一定要寫單位, 也就是一定要寫px
記住特定的像素是可以接收負數的
快捷鍵:
bp background-position: 0 0;
注意點:
同一個標籤可以同時設定背景顏色和背景圖片, 如果顏色和圖片同時存在, 那麼圖片會覆蓋顏色
5. 背景屬性縮寫
1.背景屬性縮寫的格式
background: 背景顏色背景圖片平鋪方式關聯方式定位方式;
快捷鍵:
bg+ background: #fff url() 0 0 no-repeat;
2.注意點：
background屬性中， 任何一個屬性都可以省略
3.什麼是背景關聯方式？
預設情況下背景圖片會隨著捲軸的滾動而滾動， 如果不想讓背景圖片隨著滾動條的滾動而滾動， 那麼我們就可以修改背景圖片和滾動條的關聯方式
4.如何修改背景關聯方式？
在CSS中有一個叫做background-attachment的屬性， 這個屬性就是專門用來修改關聯方式的
格式
background-attachment：scroll;
取值：
scroll 預設值，會隨著捲軸的滾動而滾動
fixed 不會隨著捲軸的滾動而滾動
快捷鍵:
babackground-attachment:;
#5. 背景圖片與插入圖片差異?
##1.背景圖片和插入圖片區別?1.1背景圖片只是一個裝飾, 不會佔用位置(可以在上面寫其他的標籤及內容)插入圖片會佔用位置(不可以在上面寫其他的標籤及內容)
插入圖片沒有定位屬性, 所有控制圖片的位置不太方便
6. CSS精靈圖
1.什麼是CSS精靈圖CSS精靈圖是一種圖片合成技術2 .CSS精靈圖作用可以減少請求的次數, 以及可以降低伺服器處理壓力#3.如何使用CSS精靈圖CSS的精靈圖需要配合背景圖片和背景定位來使用
.box1{
width: 110px; //设置宽高
height: 143px;
background-position: -560px -216px; //设置xy
}以上是CSS的背景與精靈圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！
