精灵技术的实现——精灵图

最新推荐文章于 2024-08-03 22:01:17 发布

单纯、

最新推荐文章于 2024-08-03 22:01:17 发布

阅读量576

点赞数 17

文章标签： css3 学习 html5 前端

本文链接：https://blog.csdn.net/qq_65174063/article/details/139699486

版权

打开王者荣耀官网，可以看到网页上有很多大大小小的图片，

当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。

然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。

怎么解决呢？这就需要用到css精灵技术了。

将网页中的一些背景图像整合到一张大图中（精灵图），精确定位到精灵图中的各个小图，这样，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。

页面右上角欢迎登陆的图标就在下图上

如图，那么，如何实现这一功能呢？

就需要使用CSS的

background-image 插入图片
background-repeat 不让小图标重复
background-position属性进行背景定位

首先使用选择工具来框选小图标大小和进行定位，我用的是picpick

<!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>
        div {
            width: 60px;
            height: 60px;
            background-image: url(./index.png);
            background-repeat: no-repeat;
            background-position: -183px 0px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

运行结果