【Web前端实操16】雪碧图（CSS精灵图）

雪碧图

CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去

雪碧图一般会给一个完整的图片，主要利用background-position 属性设置背景图像的起始位置。

优点

减少图片的字节
减少网页的http请求，从而大大的提高页面的性能

原理

通过background-image引入背景图片
通过background-position把背景图片移动到自己需要的位置

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雪碧图</title>
    <style>
        span{
            display: block;
            width: 55px; 
            height: 55px; 
            border: 1px solid #ccc;
            background-image: url("img/xuebi.png") ;
            float: left;
        }
        /* background-position 属性设置背景图像的起始位置。
        提示: 默认情况下，background-image 背景图像放置在元素的左上角，并在垂直和水平方向上重复。 */
        .one{
            background-position: -14px -20px;
        }
        .two{
            background-position: 70px -20px;
        }
        .three{
            background-position: 143px -20px;
        }
        .four{
            background-position: 216px -20px;
        }
        .five{
            background-position: 288px -20px;
        }
        .six{
            background-position: 360px -20px;
        }
        
    </style>
</head>
<body>
    <div>
        <span class="one"></span>
        <span class="two"></span>
        <span class="three"></span>
        <span class="four"></span>
        <span class="five"></span>
        <span class="six"></span>
    </div>
</body>
</html>