老师，关于雪碧图的引用

首页课程实战体系课手记专栏慕课教程

老师，关于雪碧图的引用

来源：3-1 切图实战--顶部

精慕门2504353

2020-04-20 11:17:34

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

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

写回答

1回答

好帮手慕夭夭

2020-04-20

已采纳

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

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

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

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

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

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

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

0 学习 · 40143 问题

相似问题

回答 1

回答 1

回答 1

回答 1

回答 1