CSS-精灵图片的使用（从一张图片中截图指定位置图标）
目錄
一、名詞解釋
二、使用難點
三、使用步驟
四、程序源碼
一、名詞解釋
? ? 在網(wǎng)頁中，我們可以看到有很多的小圖標(biāo)，比如微博上的登錄位置有很多這樣的小圖標(biāo)。因為瀏覽器顯示網(wǎng)頁的所有內(nèi)容都需要從我們自己的服務(wù)器進行下載，如果將這些圖標(biāo)分別存在服務(wù)器上，那么當(dāng)需要顯示的時候?qū)l(fā)出很多次請求-->響應(yīng)-->下載，這樣一來將會消耗大量的時間來下載這些小圖標(biāo)
? ? 所以為了提高網(wǎng)頁響應(yīng)速度，避免這個小圖標(biāo)加載耗費大量時間，于是將這些小圖片全部放到一張圖片上，例如下面的圖是利用瀏覽器調(diào)試工具(通常為F12打開)從微博的請求中找到的，大家可以直接下載使用
二、使用難點
? ? 精靈圖片的使用難點在于如何在這一張圖片中定位到我們需要的部分，首先我們需要理解三個坐標(biāo)：瀏覽器坐標(biāo)、組件坐標(biāo)、圖片坐標(biāo)，每個組件都有自己的坐標(biāo)點，左上角為原點，往上y值為負數(shù)，越來越小；往左x為負數(shù)，越來越小
? ? 假如我們的組件的寬高分別為16px，圖片寬高為200px，我們發(fā)現(xiàn)如果將圖片作為組件的背景圖片，將會從圖片0,0左邊點開始顯示，只能顯示圖片的16px，因為組件只有這么大，多余的圖片就被舍棄了。如下圖片當(dāng)圖片原點和組件原點重疊的時候，組件只能顯示圖片的16px大小
? ? ?假如此時我們想要截取圖片中第二列中的亮的vip6，此時圖片需要分別往左移動和往上移動一定距離如下。原來圖片的坐標(biāo)和組件的坐標(biāo)重疊都是0,0，此時圖片往上移動，相當(dāng)于y減小了100px（假設(shè)值），此時y坐標(biāo)為-100px；往左移動24px，此時x坐標(biāo)為-24px，所以如果我們需要獲取vip6圖標(biāo)，圖片相對于組件坐標(biāo)往左移動24px和往上移動100px就能取到
三、使用步驟
? ?1.我們需要用到CSS中兩個與背景圖片有關(guān)的屬性
-
background-image: url("圖片地址");
-
background-position: x坐標(biāo) y坐標(biāo);
? ? 2.現(xiàn)在我們以取vip3和4以及微博認證為例
? ?3.創(chuàng)建三個div，寬高分別等于vip3和4以及微博認證大小，如vip3和4寬高都為16px，微博認證x及y坐標(biāo)分別為95px 35px
- 創(chuàng)建三個div
- 指定寬高、背景圖片、圖標(biāo)所在位置
- ? 顯示效果
四、程序源碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>index</title><style>div{width: 16px;height: 16px;background-image: url("images/icon.png");}/* 從精靈圖片中獲取需要的圖片 */.vip3{ /* 獲取vip3 */background-position: -24px -48px;}.vip4{ /* 獲取vip4 */background-position: -24px -72px;}.auth{ /* 獲取微博認證 */width: 95px; /* 微博認證和vip大小不一樣，需單獨指定 */height: 35px;background-position: -425px -50px; }</style> </head> <body><!-- 設(shè)置三個div顯示 --><div class="vip3"></div><div class="vip4"></div><div class="auth"></div> </body> </html>?
總結(jié)
以上是生活随笔為你收集整理的CSS-精灵图片的使用（从一张图片中截图指定位置图标）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Ubuntu21.10配置阿里云DNS方
- 下一篇： 下载工具:aria2c