雪碧图的简单制作

作者: 心软脾气硬01 | 来源:发表于2018-09-11 17:32 被阅读2446次

雪碧图的简单制作
前端—雪碧图
雪碧图制作-mapbox本地化
css-雪碧图
雪碧图制作
Python使用png图片生成MapboxGL雪碧图
合格前端系列（二）：前端优化问题
前端利用steps设置不连续动画
mapbox GL 搭建本地服务（二）
photoshop 制作雪碧图

雪碧图是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更好，并且可以减小图片的总大小。

雪碧图的制作与使用方法：
使用图像编辑软件如Photoshop将多张图放到同一个图层并导出。
原图如下：

2.jpg

使用自动化构建工具自动拼接合并后的图片。
引用图片时，图片地址为合并后的图片地址。

需要进行截图

1.jpg

3.jpg

源代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮练习</title>
    <style type="text/css">
         .im:link{
             display: block;
             background-image: url(1.jpg);
             width: 129px;
             height: 46px;
         }
         .btn{
             display: block;
             width: 50px;
             height: 29px;
             background-image: url(2.jpg);
             background-repeat: no-repeat;
         }
         .btn:hover{
             background-position: -50px 0px;
         }
        .btn:active{
            background-position: -186px 0px;
        }

    </style>
</head>
<body>
    <a href="#" class="im"></a>
    <a href="#" class="btn"></a>
</body>
</html>