CSS Sprites精灵图

最新推荐文章于 2024-04-29 13:34:43 发布

weixin_45846862

最新推荐文章于 2024-04-29 13:34:43 发布

阅读量118

点赞数

本文链接：https://blog.csdn.net/weixin_45846862/article/details/103444851

版权

什么是CSS Sprites
CSS Sprites通常被称为css精灵图，在国内也被意译为css图片整合和css贴图定位，也有人称他为雪碧图。就是将导航的背景图，按钮的背景图等有规则的合并成一张背景图，即多张图合并为一张整图，然后再利用background-position进行背景图定位的一种技术

为什么需要css sprites
CSS Sprites 并不是一门新的技术了，目前他发展的已经比较成熟，阿里巴巴、百度、谷歌等各公司的网页中到处都可以发现CSS Sprites 的影子。

他是网页里常见的一种图片应用处理方式，他允许你将一个页面里所涉及到的所=有的零星的图片都整合到一张大图中去，这样一来，当访问这个页面时，所加载的图片就不会像以前那样一张一张的慢慢显示出来了，对于当前的网络所流行的速度来说，不超出200kb的单张图片所需要的加载时间基本是差不多的，节省加载速度的关键不是降低重量，而是减少个数，就因为计算机都是按照byte计算。页面每显示一张图片都会向服务器发送一次请求。所以，图片越多，所请求的次数就越多。

为了减少HTTP的请求次数，很多网站的导航背景图、登录框、按钮背景图等使用的并不是标签，而是CSS Sprite

css sprites的优势
优势：通过整合图片，减少对服务器的请求数量，减少图片的体积从而减轻服务器的负担，提高网页的加载速度
在这里插入图片描述

<style>
        .common {
            width: 11px;
            height: 14px;
            background-image: url("https://jhca.png");
            background-repeat: no-repeat;
        }
        
        .test1 {
            background-position: 0px 0px;
        }

        .test2 {
            background-position: -26px 0px;
        }

        .line div {
            display: inline-block;
        }
    </style>

<body>
<div class="line">
    <div>test1</div><div class="common test1"></div>
</div>
<div class="line">
    <div>test2</div><div class="common test2"></div>
</div>
</body>

在这里插入图片描述