CSS精灵图代码示例

和蔼的阿木木o

已于 2022-06-27 14:22:09 修改

阅读量594

点赞数

分类专栏： css html 文章标签：大数据

于 2022-06-27 09:39:11 首次发布

本文链接：https://blog.csdn.net/m0_59642141/article/details/125478038

版权

html 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

css

16 篇文章 0 订阅

订阅专栏

什么是css Sprite

当用户访问一个网站时，浏览器会向服务器发送一系列请求，比如说网页上的每张图像都需要经过一次请求才能最终展示给用户。然而，一个网页中往往包含大量的图像资源（例如在页面中展示的图片、网页的背景图像以及一些装饰性的图像等），这就会导致浏览器频繁的请求服务器，大大降低网页的加载速度。为了有效的减少请求服务器的次数，提高页面加载的速度，就出现了 CSS Sprites 技术，也被称为精灵技术。

简单来讲，精灵技术就是一种处理网页背景图像的方式，它需要将一个页面中涉及到的所有或一部分较小的背景图像合并到一张较大的图片中，然后再将这个图片应用到网页种。通常情况下，我们只是将背景图像中那些较小的、零碎的图像集中到一个大的图像中，这个较大的图像被称为精灵图（也被称为雪碧图），如下图所示就是淘宝网上应用的一个精灵图：

精灵图的使用也非常简单，只需要借助 background 或者 background-position 属性来定位背景图像的位置即可。

简单来说，精灵图就是一个大的背景图，您只需要使用 background-position 来移动背景图，从而只显示背景图的一部分。目前为止，精灵图发展的已经非常成熟，阿里巴巴、百度、谷歌、京东、淘宝等大型网站中都可以看到精灵图的影子，使用精灵图可以减少图片的体积，也可以显著的减少对服务器的请求次数，提高网页的加载速度。当然，使用精灵图也不是没有弊端，比如：

在图片合并的时候，需要把多张图片有序的、合理的合并成一张图片，每个小图之间需要预留足够的空间；
在宽屏或者高分辨率的屏幕下来自适应页面宽度时，如果图片不够宽，会出现背景断裂；
精灵图在维护的时候比较麻烦，如果页面背景有少许改动，就需要修改整个精灵图。

css精灵图代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bon{
            width: 1000px;
            height: 80px;
            margin: 0 auto;
            box-shadow: 0 0 5px black;
            line-height: 80px;
        }
        a{
            font-weight: 700;
            color: gray;
            margin: 0px 20px;
            text-decoration: none;
        }
        a:hover{
            color: black;
            border-bottom: 3px solid #4e6ef2;
            padding-bottom: 10px;
        }
        .bon i{
            display: inline-block ;
            background-image: url(./img/cs1.png);
            background-repeat: no-repeat;
        }
        .icon1{
            width: 14px;
            height: 15px;
            background-position: -118px -46px ;
        }
        .icon2{
            width: 16px;
            height: 16px;
            background-position: -82px -10px ;
        }
        .icon3{
            width: 16px;
            height: 16px;
            background-position: -10px -10px ;
        }
        .icon4{
            width: 16px;
            height: 16px;
            background-position: -10px -46px ;
        }
        .icon5{
            width: 16px;
            height: 16px;
            background-position: -10px -46px ;
        }

        .icon6{
            width: 14px;
            height: 16px;
            background-position: -118px -10px ;
        }
        .icon7{
            width: 15px;
            height: 15px;
            background-position: -10px -82px ;
        }
        .icon8{
            width: 16px;
            height: 15px;
            background-position: -82px -46px ;
        }
        .icon9{
            width: 16px;
            height: 16px;
            background-position: -46px -46px ;
        }
    </style>
</head>
<body>
    <div>
        <div class="bon">
        <a href=""><i class="icon1"></i>&ensp;网页</a>
        <a href=""><i class="icon2"></i>&ensp;资讯</a>
        <a href=""><i class="icon3"></i>&ensp;视频</a>
        <a href=""><i class="icon4"></i>&ensp;图片</a>
        <a href=""><i class="icon5"></i>&ensp;知道</a>
        <a href=""><i class="icon6"></i>&ensp;文库</a>
        <a href=""><i class="icon7"></i>&ensp;贴吧</a>
        <a href=""><i class="icon8"></i>&ensp;地图</a>
        <a href=""><i class="icon9"></i>&ensp;采购</a>
        <a href="">更多</a>
    </div>
    </div>
</body>
</html>