雪碧图的简单制作
2018-09-11 本文已影响2446人
心软脾气硬01
雪碧图是一种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>
