老师,关于雪碧图的引用
老师,视频中说把小图集合到一个图片中引用,那代码中如何引用。都放这个大图的地址吗?
视频中说根据小图的位置来引用。 这个如何写?
26
收起
正在回答
1回答
同学你好 , 参考如下小例子:
雪碧图就是把很多小图标放在一张图片中。在ps中打开图片测量一下要使用的图标的位置 .例如如下:
在引入这张大图作为背景图之后,假如想要显示第三个图标,就要结合背景定位移动背景图的位置,即background-position ,属性值是根据是铃铛在雪碧图的位置 :
也就是铃铛距离雪碧图左边和上边的位置 , 同学可以使用ps测量一下 . 如下 :铃铛距离左边0px , 距离上边44px.
所以要想铃铛显示出来,需要向上移动44px , 所以需要设置负值 , 如下设置:
不过目前图标比较流行使用iconfont,使用雪碧图的已经减少了。在后面阶段的案例中会涉及到iconfont的使用哦,这里简单了解一下。
如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星