2018-7-25 css10-背景和精靈圖

08-10

背景顏色，background-color
背景圖片，background-image: url()
背景平鋪，background-repeat
背景定位，background-position
背景屬性連寫（多個屬性一起設置），background
背景關聯（圖片是否和頁面一起滾動），background-attachment
插入圖片和背景圖片的區別
精靈圖，CSS Sprite

轉自HTML+CSS - 文集 - 簡書

自學請參考CSS 教程

【背景顏色】

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

取值:

具體單詞
rgb
rgba
十六進位

<head><meta charset="UTF-8"><title>CSS Example</title><style> .box1{ background-color: red; } .box2{ background-color: rgb(0,255,0); } .box3{ background-color: rgba(0,0,255,0.7); } .box4{ background-color: #0ff; } </style></head><body><h1>六言詩·給彭德懷同志</h1> <p class="box1"> 山高路遠坑深，</p><p class="box2"> 大軍縱橫馳奔。</p><p class="box3"> 誰敢橫刀立馬？</p><p class="box4"> 唯我彭大將軍。</p></body>

效果

【背景圖片】

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

<head><meta charset="UTF-8"><title>CSS Example</title><style> div{ width: 500px; height: 250px; } .box{ background-image: url(images/mzd.jpg); /*background-image:url(http://www.test.com.cn/example/1.jpg);*/ } .box1{ background-color: red; } .box2{ background-color: rgb(0,255,0); } .box3{ background-color: rgba(0,0,255,0.7); } .box4{ background-color: #0ff; } </style></head><body><div class="box"><h1 >六言詩·給彭德懷同志</h1></div><p class="box1"> 山高路遠坑深，</p><p class="box2"> 大軍縱橫馳奔。</p><p class="box3"> 誰敢橫刀立馬？</p><p class="box4"> 唯我彭大將軍。</p></body>

效果

注意：

圖片的地址必須放在url()中, 圖片的地址可以是本地的地址, 也可以是網路的地址
如果圖片的尺寸沒有標籤的尺寸大, 那麼會自動在水平和垂直方向平鋪來填充
如果網頁上出現了圖片, 那麼瀏覽器會再次發送請求獲取圖片

【背景平鋪】

如何控制背景圖片的平鋪方式?

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

取值:

repeat 默認, 在水平和垂直都需要平鋪
no-repeat 在水平和垂直都不需要平鋪
repeat-x 只在水平方向平鋪
repeat-y 只在垂直方向平鋪

例子，只在水平平鋪

<head><meta charset="UTF-8"><title>CSS Example</title><style> div{ width: 500px; height: 250px; } .box{ background-image: url(images/mzd.jpg); background-repeat: repeat-x; } .box1{ background-color: red; } .box2{ background-color: rgb(0,255,0); } .box3{ background-color: rgba(0,0,255,0.7); } .box4{ background-color: #0ff; } </style></head><body><div class="box"><h1 >六言詩·給彭德懷同志</h1></div><p class="box1"> 山高路遠坑深，</p><p class="box2"> 大軍縱橫馳奔。</p><p class="box3"> 誰敢橫刀立馬？</p><p class="box4"> 唯我彭大將軍。</p></body>

效果

應用場景:

可以通過背景圖片的平鋪來降低圖片的大小, 提升網頁的訪問速度。這個適合圖像有規律的圖片，裁剪一小塊，然後平鋪即可，此時網路傳輸只需要那個裁剪下的一小塊就行了。
可以將多張圖片拼接成一張圖片

注意點:

背景顏色和背景圖片可以共存, 圖片會覆蓋顏色

【背景定位】

如何控制背景圖片的位置?

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

格式：

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

取值，

具體的方位名詞

水平方向: left center right
垂直方向: top center bottom

具體的像素，例如: background-position: 100px 200px;

記住一定要寫單位, 也就是一定要寫px
記住具體的像素是可以接收負數的

例子，水平和垂直都居中

<head><meta charset="UTF-8"><title>CSS Example</title><style> div{ width: 500px; height: 250px; } .box{ background-image: url(images/mzd.jpg); background-repeat: no-repeat; background-position:center center;/*background-position:100px 100px;*/ } .box1{ background-color: red; } .box2{ background-color: rgb(0,255,0); } .box3{ background-color: rgba(0,0,255,0.7); } .box4{ background-color: #0ff; } </style></head><body><div class="box"><h1 >六言詩·給彭德懷同志</h1></div><p class="box1"> 山高路遠坑深，</p><p class="box2"> 大軍縱橫馳奔。</p><p class="box3"> 誰敢橫刀立馬？</p><p class="box4"> 唯我彭大將軍。</p></body>

效果

應用場景:

當圖片比較大的時候, 可以通過定位屬性保證圖片永遠居中顯示（確保重要信息在圖片中間）

【背景屬性連寫】

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

格式

background: 背景顏色背景圖片平鋪方式關聯方式定位方式;

注意點：

background屬性中，任何一個屬性都可以被省略

例子

<head><meta charset="UTF-8"><title>CSS Example</title><style> div{ width: 500px; height: 250px; } .box{ background: yellow url(images/mzd.jpg) no-repeat 100px 100px; } .box1{ background-color: red; } .box2{ background-color: rgb(0,255,0); } .box3{ background-color: rgba(0,0,255,0.7); } .box4{ background-color: #0ff; } </style></head><body><div class="box"><h1 >六言詩·給彭德懷同志</h1></div><p class="box1"> 山高路遠坑深，</p><p class="box2"> 大軍縱橫馳奔。</p><p class="box3"> 誰敢橫刀立馬？</p><p class="box4"> 唯我彭大將軍。</p></body>

效果

【背景關聯】

什麼是背景關聯方式？

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

如何修改背景關聯方式？

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

格式

background-attachment：scroll;

取值：

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

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

背景圖片僅僅是一個裝飾, 不會佔用位置；插入圖片會佔用位置
背景圖片有定位屬性, 所以可以很方便的控制圖片的位置；插入圖片沒有定位屬性, 所有控制圖片的位置不太方便
插入圖片的語義比背景圖片的語義要強，所以在企業開發中如果你的圖片想被搜索引擎收錄，那麼推薦使用插入圖片

【精靈圖】

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

作用

可以減少請求的次數, 以及可以降低伺服器處理壓力

如何使用CSS精靈圖

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

例子

<style> .box{ width: 86px; height: 28px; background-image: url(images/weibo.png); background-position: -425px -200px; } </style> <div class="box"></div>

完成圖片

顯示圖片