雪碧图它的优缺点是什么？

最新推荐文章于 2024-02-19 06:00:00 发布

前世笑忘书

最新推荐文章于 2024-02-19 06:00:00 发布

阅读量1k

点赞数

文章标签： html5 css

本文链接：https://blog.csdn.net/weixin_45980901/article/details/103652797

版权

CSS Sprites简介：国内叫雪碧图或者雪碧精灵。它允许将网页中多个零星小图都包含到一张大图中去，减少每个图的 HTTP 请求来提高图片加载效率

下面直接用代码块展示：

<style>
 .box{
 /* 1. 定视口 */
 width: XXpx;
 height: XXpx;
 border: 1px solid;

 /* 2. 插图 */
 background-image: url("../img/sprite.jpg");
 }

 .box:hover{
 /* 3. 移动位置 */
 background-position: -XXpx -XXpx;
 }
  </style>
 备注：XX表示你所需要的大小，根据你自己图片来定。

<body>
 <!-- 图片拼合技术 sprite 雪碧图 -->
 <div class="box"></div>
</body>

雪碧图的优点：

1.可以把多张图片合并成一张，可以有效减少 HTTP 请求，提高页面加载的性能（主要原因）
2.整理和使用起来起来更为方便，同一个按钮不同状态的图片也不需要一个个切割出来并个别命名
3.解决了前端人员在图片命名上的困扰，仅只需对一张集合的图片命名，不需要对每一个小图片进行命名，大大提高了网页制作效率。
4.合成后的图片总体大小要小于多个图片和的大小
5.只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

雪碧图的缺点：

1.合成起来比较麻烦
2.适用范围不是特别广泛
3.后期维护维护性比较差