CSS background position 背景定位的用法

411 阅读1分钟

网页中很多图片素材被合成在一张图片上,然后使用背景定位来获取对应的图标。要实现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;
 }