CSS background-position 背景定位的用法

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值