css雪碧图使用

雪碧图

雪碧图：精灵图（英语：Sprite），又被称为雪碧图或拼合图。在计算机图形学中，当一张二维图像集成进场景中，成为整个显示图像的一部分时，这张图就称为精灵图。

即：把多张（尽量相同尺寸）的图片，合并在一张图片上，使用background-position, 展示图片

使用

<style>
    .icon-1 {
            background: url('./img/css_sprites (1).png') -0px -0px no-repeat;
            width: 80px;
            height:80px;
    }
    .icon-2 {
        background: url('./img/css_sprites (1).png') -80px -0px no-repeat;
        width: 80px;
        height:80px;
    }
</style>
&lt;div&gt;
    &lt;div class="icon-1"&gt;&lt;/div&gt;
    &lt;div class="icon-"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>

关于如何放大或者缩小雪碧图

关键点：

background-size、width、height、background-position 四个属性都需要按照你想要的比例进行等比例放大或者缩小

<style>
    .icon-item {
        background: url('./img/css_sprites (1).png');
        background-repeat: no-repeat;
        background-size: 160px 80px;
        width: 80px;
        height:80px;
    }
.icon-item.icon-2calc {
    background-size: 320px 160px;
    width: 160px;
    height:160px;
}

.icon-item-1 {
    background-position: 0 0;
}

.icon-item-2 {
    background-position: -160px 0;
}

</style>
<div>
<div class=“icon-item icon-item-1”></div>
<div class=“icon-item icon-2calc icon-item-2”></div>
</div>

效果