发布时间:
来源:CSDN
(相关资料图)
一.CSS Sprite
这也就是我们平时所说的雪碧图(也叫精灵图),主要通过background-position属性来控制图片显示的位置,不过要注意的是图片是以左上角为坐标原点,坐标的变动应在第四象限内,及x的取值为0到正无穷,y的取值为负无穷到0.
二.使用font icon
首先我们要下载font字体文件,推荐网站:https://www.iconfont.cn/
选择icon后添加购物车,下载代码(建议创建一个项目,将图标加入到项目中,这样方便后续维护),我们会得到以下几个文件,其中标红的为必须文件,一个为css样式文件,其余四个为字体文件。(除了这5个文件,其它文件可以删除)
demo_index.html页面显示了如何使用字体图标:
使用方式:
方式一:font+html
3
方式二:font+css