精灵图的简单使用！！！

前端ing学习

已于 2024-08-03 09:07:14 修改

阅读量1k

点赞数 12

文章标签：前端 html css

于 2024-08-03 09:05:49 首次发布

本文链接：https://blog.csdn.net/2301_80342078/article/details/140885094

版权

一、什么是精灵图

很多大型网页在首次加载的时候需要很多张小图片，精灵图就是把很多有用的小图片合并到一张较大的图中，一定程度上加快了页面的加载速度，缓解了服务器的压力。
类似于

https://i-blog.csdnimg.cn/blog_migrate/c74aec78ccf0af0151faf54caf3bfad7.png

二、如何使用精灵图

使用精灵图，其实就是对标签背景图片设置的综合应用

background-image（标签背景图片）
- 用url函数来引入文件地址，并用“ ”或‘ ’包裹
- 标签必须有明确的宽高，否则看不见背景图片

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sprite{
            background-image: url("./c74aec78ccf0af0151faf54caf3bfad7.png");
            height: 300px;
            width: 30px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="sprite"></div>
</body>
</html>

background-repeat（背景图片的平铺方式）
- repeat(默认)：重复填充
由于把height加到了600px，width加到300px，精灵图在横向和纵向都出现了重复

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sprite{
            background-image: url("./c74aec78ccf0af0151faf54caf3bfad7.png");
            height: 600px;
            width: 300px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="sprite"></div>
</body>
</html>

no-repeat：不重复

background-size（背景图片在标签中的大小）

auto（默认值）：保留图片自身宽度或者高度

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sprite{
            background-image: url("./c74aec78ccf0af0151faf54caf3bfad7.png");
            height: 600px;
            width: 300px;
            margin: auto;
            background-repeat: no-repeat;
            background-size: auto;
        }
    </style>
</head>
<body>
    <div class="sprite"></div>
</body>
</html>

px单位

可以直接设置图片大小

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sprite{
            background-image: url("./c74aec78ccf0af0151faf54caf3bfad7.png");
            height: 600px;
            width: 300px;
            margin: auto;
            background-repeat: no-repeat;
            background-size: 200px 400px;
        }
    </style>
</head>
<body>
    <div class="sprite"></div>
</body>
</html>

%单位（好用）

contain（垂直铺满）：y轴上，图片占标签的100%

首先满足高度得完全显现，宽度随比例拉
cover（水平铺满）：x轴上，图片占标签的100%

首先满足宽度得完全显现，高度随比例拉

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sprite{
            background-image: url("./c74aec78ccf0af0151faf54caf3bfad7.png");
            height: 300px;
            width: 300px;
            margin: auto;
            background-repeat: no-repeat;
            background-size: cover;
            /* background-size: contain; */
        }
    </style>
</head>
<body>
    <div class="sprite"></div>
</body>
</html>

background-position（背景图片在标签中的相对位置）

一般直接在开发者工具中确定大小fn+f12
- px单位
- %单位
  
  %单位仅在background-size：auto中有效
实践

由于这张精灵图是按y轴排列，所以一般选择background-size水平铺满，然后利用background-position上下移动来选择不同的小图片！