css雪碧图实例
2018-11-26 本文已影响0人
邵毅超
作业：雪碧图也就是一整张图片利用css样式里的background-position去调整位置，设置hover或是active显示出鼠标经过和点击的特效。链接图片的时候是相对路径下，并且是有url值的。再有图片显示要写一个no-repeat取消重复显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车特效</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.select{
margin: 0 auto;
display: block;
width: 1000px;
height: 35px;
background-color:#F5FFFA;
}
div{
width: 42px;
height: 34px;
background-image: url(amazon-sprite_.png);
background-repeat: no-repeat;
background-position: -8px -335px;
}
div:hover{
background-image: url(amazon-sprite_.png);
background-repeat: no-repeat;
background-position: -55px -335px;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" target='_blank' class="select">
<div></div>
</a>
</body>
</html>
image.png
