精灵图技术

最新推荐文章于 2024-07-12 19:29:32 发布

bear*6

最新推荐文章于 2024-07-12 19:29:32 发布

阅读量295

点赞数 5

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_48375854/article/details/121042371

版权

CSS 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

精灵图技术

一、为什么需要精灵图技术
二、精灵图的使用
三、案例

一、为什么需要精灵图技术

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称CSS Sprites、CSS 雪碧）。
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

二、精灵图的使用

使用精灵图核心：

精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
这个大图片也称为 sprites 精灵图或者雪碧图
移动背景图片位置，此时可以使用background-position 。
移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同。（注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）
因为一般情况下都是往上往左移动，所以数值是负值。
使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

三、案例

下图是一张精灵图，根据精灵技术，找到A这个单词。
在这里插入图片描述
案例分析：
首先需要得到该字母在精灵图中位置大小和坐标。然后根据其大小在页面构建同大小的盒子，在通过background属性给盒子添加背景，即将此完整的精灵图作为盒子的背景，接着通过background-position属性根据得到的相关字母的坐标进行移动，需要注意，一般精灵图以左上角的位置为默认值开始移动，所以取值一般为负，最后得到想要的效果。
代码如下：

<!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>
        .a {
            display: inline-block;
            width: 110px;
            height: 118px;
            border: 1px solid #ccc;
            background-position:  -493px -276px;
            background: url(./abcd.jpg) no-repeat;
            /* background-color: blueviolet; */
        }
    </style>
</head>
<body>
    <span class='a'></span>
</body>
</html>

得到的结果为：
在这里插入图片描述

bear*6

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
精灵图技术

精灵图技术一、为什么需要精灵图技术二、精灵图的使用三、案例一、为什么需要精灵图技术一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称CSS Sprites、CSS 雪碧）。核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。二、精灵图的使用使用精灵图核心：
复制链接

扫一扫

专栏目录