老师,关于雪碧图的引用

老师,关于雪碧图的引用

老师,视频中说把小图集合到一个图片中引用,那代码中如何引用。都放这个大图的地址吗?

视频中说根据小图的位置来引用。 这个如何写?

正在回答

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

1回答

同学你好 , 参考如下小例子:

雪碧图就是把很多小图标放在一张图片中。在ps中打开图片测量一下要使用的图标的位置 .例如如下:

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

在引入这张大图作为背景图之后,假如想要显示第三个图标,就要结合背景定位移动背景图的位置,即background-position ,属性值是根据是铃铛在雪碧图的位置 :

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

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

所以要想铃铛显示出来,需要向上移动44px , 所以需要设置负值 , 如下设置:

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

不过目前图标比较流行使用iconfont,使用雪碧图的已经减少了。在后面阶段的案例中会涉及到iconfont的使用哦,这里简单了解一下。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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