CSS精灵技术及其优缺点

最新推荐文章于 2024-04-05 00:15:24 发布

歪大梨

最新推荐文章于 2024-04-05 00:15:24 发布

阅读量378

点赞数

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_64037609/article/details/126711379

版权

前端专栏收录该内容

82 篇文章 0 订阅

订阅专栏

概念：

css sprites，中文名：雪碧图、精灵图、css图像拼合、css贴图定位

实现原理：

将很多个小图标拼合到一张大图上，使用background-image,background-repeat及background-position等属性，将需要的小图标正确的显示出来

优缺点：

优点

- 减少网页的 http 请求，从而大大的提高页面的性能

- 图片命名上的困扰

- 更换风格方便

缺点

- 必须要限定容器大小符合背景图元素位置

- 需要计算位置。

应用场景

适用于一般小图片（如小图标，小背景），不适合大背景大布局背景。

下面图片路径用自己的就行

<!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>
        .box {
            width: 88px;
            height: 88px;
            background-image: url("./images/sprites.png");
            background-repeat: no-repeat;
            margin-bottom: 50px;
        }
        .sprites1 {
            background-position: 0 -88px;
        }
        .sprites2 {
            background-position: 0 -176px;
        }
        .sprites3 {
            background-position: 0 -264px;
        }
    </style>
</head>
<body>
   
     <div class="box"></div>
     <div class="box sprites1"></div>
     <div class="box sprites2"></div>
     <div class="box sprites3"></div>
</body>
</html>