5、css精灵技术（背景图片）

最新推荐文章于 2023-04-17 11:46:36 发布

AndyHu99

最新推荐文章于 2023-04-17 11:46:36 发布

阅读量401

点赞数

本文链接：https://blog.csdn.net/qq_42281321/article/details/106189063

版权

一、背景：

当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

二、精灵技术的使用

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

示例：

<!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>
        a{
            width: 196px;
            height: 53px;
            /* float: left; */
            position: absolute;
            background: url(./img/sp.png) no-repeat;
            background-position: -389px -303px;
            text-align: center;
            text-decoration: none;
            line-height: 53px;
            font-weight: bold;
            font-size: 16px;
            color: white;
            letter-spacing: 5px;
        }
        a:hover {
            background: url(./img/sp.png) no-repeat;
            background-position: -170px -300px;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">点击查看</a>
    </div>
    
</body>
</html>

效果：