前端 精灵图
Posted bladecheng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端 精灵图相关的知识，希望对你有一定的参考价值。
精灵图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>精灵图案例</title>
<style>
/*精灵图就是操作大图在显示区域的位置*/
.box
width: 500px;
height: 100px;
background-color: orangered;
border: solid;
.box
background-image: url("img/bg.png");
background-position-y: -150px;
.box:hover
cursor: pointer;
background-position-y: -250px;
</style>
<style>
.b1
width: 155px;
height: 48px;
border: solid;
background-image: url("img/bg.png");
.b1:hover
cursor: pointer;
background-position-y: -48px;
</style>
<style>
.b2
width: 157px;
height: 48px;
border: solid;
background-image: url("img/bg.png");
background-position: -155px 0;
.b2:hover
cursor: pointer;
background-position: -155px -48px;
</style>
</head>
<body>
<div class="box"></div>
<div class="b1"></div>
<div class="b2"></div>
</body>
</html>以上是关于前端 精灵图的主要内容，如果未能解决你的问题，请参考以下文章