CSS精灵图(王者荣耀案例)

首先,我们应该知道引入精灵图的原因:

具体是因为,网页上面的每张图片都要经历一次请求才能展示给用户,小的图标频繁的请求服务器,降低页面的加载速度,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,因此,产生了css精灵技术。

其次,我们应该知道精灵图和图标字体(有文章介绍)在使用的过程中有哪些异同点:

同:能够缩小源文件的体积,减少http的请求,提高页面的性能

异:图标字体具有矢量效果,放大缩小不失真,而且可以使用CSS任意更改图标字体的颜色;而精灵图的大小固定,放大缩小会失真,更改图片颜色时需要重新修改精灵图。

如下图,王者荣耀官网的一张精灵图:

CSS精灵图(王者荣耀案例)_第1张图片

我们选取其中的小红旗和新人专区做一个案例,效果如下图:

CSS精灵图(王者荣耀案例)_第2张图片

html结构

<body>
    <div class="hong">精灵图的本质是处理网页背景图像的一种技术div>
    <div class="xin">可以有效减少服务器接受和请求的次数,提高页面的加载速度div>
body>

css样式

 

转载于:https://www.cnblogs.com/EricZLin/p/8818412.html

你可能感兴趣的:(CSS精灵图(王者荣耀案例))