<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
a {
display: block;
width: 250px;
height: 78px;
background-color: pink;
background-image: url(./img/亚马逊.png);
}
a:hover{
background-position: 0 -80px;
}
a:active{
background-position: 0 -660px;
}
</style>
</head>
<body>
<!-- 创建一个超链接 -->
<a class="btn" href="#"></a>
</body>
</html>
<!--
一、图片整合技术（CSS-Sprite）
优点：
1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，
提高访问效率，提高了用户体验。
2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验
二、雪碧图使用步骤
1:先确定要使用的图标
2:测量图标的大小
3:根据测量结果创建一个元素
4:将雪碧图设置为元素的背景
5：设置一个偏移量以显示正确的图片
2417
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
