CSS基础：精灵技术（sprites）

最新推荐文章于 2024-05-16 17:48:19 发布

小猪弟

最新推荐文章于 2024-05-16 17:48:19 发布

阅读量3.4k

点赞数 7

分类专栏： CSS 文章标签： css 精灵图精灵 sprites csssprites

本文链接：https://blog.csdn.net/u011863822/article/details/123383903

版权

CSS 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

其实网页在加载的时候每请求一次图片就算一次请求，请求次数过多也会造成服务器压力过大，相应变慢。而精灵图（sprites）技术就算解决这个问题：减少对服务器的请求次数。

为什么减少了图片的请求次数呢？说白了将一些小图标或者图片放在一张图片里面，然后通过CSS定位展示其中需要的部分。

在这里插入图片描述

王者荣耀网页种我标记的两个位置，看似没什么关系，但是通过后台看的话，发现一件事，那就是图片的却都是来自一张图片：在这里插入图片描述

所以可以看出精灵图核心：

精灵技术主要是针对背景图片的使用，就是把很多小背景图片放在一张大图片种，减少服务器请求（如不本身就很大，就不建议整合在一起了）。
这个大图被叫做sprites，精灵图或者雪碧图。
移动背景图片的位置，此时一般使用background-position
移动的距离就是这个目标图片的x和y坐标。以左上角位0点，x轴向右数值越来越大，y轴向下数值越来越大。不过其可以上下左右，所以有时候x，y轴可以是负值。
因为上面特点，所以如果使用精灵技术需要精确量出目标图片在大图种的位置，以及需要图片的大小。

演示

首先来张图

在这里插入图片描述

测量位置很多工具，本人直接用ps进行测量，如果需要免费最新版资源可以私信我要。

通过上面的大图，我们拼写一个简单文明的词汇：fuck

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style type="text/css">
        #f{
            width: 85px;
            height: 110px;
            background-image: url("jpg/sprites.png");
            background-position: -45px -205px;
            float: left;
        }
        #u{
            width: 120px;
            height: 125px;
            background-image: url("jpg/sprites.png");
            background-position: -650px -560px ;
            float: left;
        }
        #c{
            width: 105px;
            height: 115px;
            background-image: url("jpg/sprites.png");
            background-position: -350px -20px;
            float: left;
        }
        #k{
            width: 125px;
            height: 125px;
            background-image: url("jpg/sprites.png");
            background-position: -665px -200px;
            float: left;
        }
    </style>
</head>
<body>
<div id="f"></div>
<div id="u"></div>
<div id="c"></div>
<div id="k"></div>

</body>
</html>

在这里插入图片描述

小猪弟

关注

7
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
CSS基础：精灵技术（sprites）

其实网页在加载的时候每请求一次图片就算一次请求，请求次数过多也会造成服务器压力过大，相应变慢。而精灵图（sprites）技术就算解决这个问题：减少对服务器的请求次数。为什么减少了图片的请求次数呢？说白了将一些小图标或者图片放在一张图片里面，然后通过CSS定位展示其中需要的部分。王者荣耀网页种我标记的两个位置，看似没什么关系，但是通过后台看的话，发现一件事，那就是图片的却都是来自一张图片：所以可以看出精灵图核心：精灵技术主要是针对背景图片的使用，就是把很多小背景图片放在一张大图片种，减少服务器请求
复制链接

扫一扫