CSS background position 背景定位的用法

GabrielPanda發表於2018-01-24
CSS

網頁中很多圖片素材被合成在一張圖片上，然後使用背景定位來獲取對應的圖示。要實現CSS摳圖，只需要用到一個屬性：background-position。

2017-05-01 09.20.22-1.png

2017-05-01 09.20.22-2.png

小ICON在大圖中，想提取出來，需要用background-position屬性，這個屬性相當於大圖片不動，把div的頂點進行移動，移動到目標小圖的頂點位置

2017-05-01 09.20.22-3.png

background-position屬性，它有兩個引數，分別是水平方向移動的畫素、豎直方向移動的畫素，都用負數表示。大圖不動，div移動。

.test{
     background:url(bg.png);
    background-repeat:no-repeat;
   background-position:-25px -200px;
    height:24px;
    width:24px;
 }
複製程式碼

相關文章