雪碧图怎么在代码里面使用

雪碧图怎么在代码里面使用

有这么多图片,如何精确定位到某一张特定的图片

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕夭夭 2019-04-01 16:08:55

你好同学 , 在ps中打开图片测量一下要使用图标的位置 .例如如下:

假如要使用第三个图标

http://img1.sycdn.imooc.com//climg/5ca1c6b600017f3000530103.jpg

它的background-position 属性值是根据是铃铛在雪碧图的位置 :

也就是铃铛距离雪碧图左边和上边的位置 , 同学可以使用ps测量一下 . 如下 :铃铛距离左边0px , 距离上边44px. 

http://img1.sycdn.imooc.com//climg/5ca1c6de0001dfa200410110.jpg

所以要想铃铛移动显示在元素上边 ,需要向上移动44px , 所以需要设置负值 , 如下设置:

http://img1.sycdn.imooc.com//climg/5ca1c6f000015d0803070019.jpg

侧栏的话可以像视频中那样 ,如下 , 使用如下矩形在绘制的时候就能查看宽高

http://img1.sycdn.imooc.com//climg/5ca1c70c0001596e11110670.jpg

希望对你有帮助 , 祝学习愉快 ,望采纳 .

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师