sprite（雪碧图、精灵图）

html&css

发布日期: 2021-10-23

文章字数: 178

阅读时长: 1 分

<!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>
</head>

<body>
    概念：把多张图片合并成一张<br>
    使用：
    <br>1.为盒子设置成精灵图单个小图标的宽度和高度
    <br>2.设置盒子背景为精灵图background:url('xx/xxx.png');
    <br>3.background-position: -xpx -ypx;
    <br>
    优点和缺点：减少了http请求的次数，提升性能
    缺点：维护比较差（例如图片位置进行修改，内容匡高修改，添加新图标）
    <!-- 
    <div style="height: 100px;background:url('./image/picture.webp') no-repeat center/100%">

    </div> -->

</body>

</html>