CSS样式-精灵图（雪碧图）
作者：互联网
只请求一次图片加载，然后通过控制图片的background-position来获得想要的样式效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#nav {
text-align: center;
}
#nav>a {
display: inline-block;
width: 120px;
height: 50px;
background-image: url(image/bgall.png);
line-height: 50px;
color: #fff;
text-decoration: none;
background-position: left top;
} #nav>a:hover { background-position: left -50px; } </style> </head> <body> <div id="nav"> <a href="#">测试菜单</a> <a href="#">测试菜单</a> <a href="#">测试菜单</a> <a href="#">测试菜单</a> <a href="#">测试菜单</a> <a href="#">测试菜单</a> </div> </body> </html>
标签：雪碧图,菜单,background,50px,精灵,nav,测试,position,CSS 来源： https://www.cnblogs.com/Friday1/p/14426529.html