小猿圈web前端解析CSS怎麼從圖片中摳出一部分（雪碧圖）

對於學習前端的小夥伴來講css是否是一點都不陌生呢，從開始學習前端就接觸的css你真的熟練了嗎？今天小猿圈web前端講師講解怎麼從CSS圖片中摳出一部分（雪碧圖）。

這裏我們會用到一個css屬性：background-position。

按照字面理解，這個屬性就是背景定位，下面我們來具體操做一下：

我們拿到一個圖：

HTML結構是：

<div></div>

CSS代碼是：

div{

background: url('bg.png') no-repeat;

}

好比我們如今想要哪一個手機，經過ps測量到哪一個手機到尺寸是，寬度（10px）、高度（16px），那麼我們調整一下css：

div{

background: url('bg.png') no-repeat;

width:10px;

height: 16px;

}

運行結果：

手機這個小圖混雜在大圖中，想提取出來，須要用background-position屬性，background-position它有兩個參數，分別是水平方向移動的像素、豎直方向移動的像素，都用負數表示。

所以，只要找到小圖相對於大圖左上角頂點的水平移動像素、豎直移動像素就能夠了。

通過測量之後的css調整爲：

div{

background: url('bg.png') no-repeat;

width:10px;

height: 16px;

background-position: -299px -243px;

}

以上就是小猿圈web前端老師針對雪碧圖的簡單介紹，對於你熟悉的css是否有了新的理解了呢，那還在等什麼，快去行動呀，記得若是遇到了不懂問題能夠到小猿圈尋找答案，裏面有最新最全面的視頻等着你去學習。