雪碧图
2018-09-12 本文已影响0人
coolkid_carryon
html文件：
<!DOCTYPE html>
<html>
<head>
<title>9-11</title>
<meta name="generator" content="Bluefish 2.2.7" >
<meta name="author" content="dst" >
<meta name="date" content="2018-09-12T08:21:11+0800" >
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
<link href="css/amazon.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="amazon"></div>
<a class="amazon" href="#"></a>
</body>
</html>
css文件：
.amazon{
width: 128px;
height: 47px;
background-image: url(../img/amazon.png);
/*background-repeat: no-repeat;
/*background-color: gray;*/
}
a:link{
display: block;
width: 42px;
height: 30px;
background-position: -10px -338px;
}
a:hover{
background-position: -58px -338px;
}
雪碧图：
amazon.png
效果图：
sprite.png
