CSS 图像高级 Css Sprites
作者：互联网
上节课中我们学习了背景图像，这节课我们学习背景图像的高级知识，如Css Sprites，CSS 背景渐变等。
Css Sprites
Css Sprites，国内也叫CSS精灵。它的原理是将许多的小图片整合到一张大图片中，利用css中的background-image属性，background-position属性定位某个图片位置，来达到在大图片中引用某个部位的小图片的效果。
我们需要Sprites图片，可以在网上下载，可以叫美工做些，可以在线生成。这里推荐一个在线生成的网站。https://www.toptal.com/developers/css/sprite-generator
我们使用的图片是这个样子~~
下面的代码展示两个div，开始它们有背景图片，当光标悬停时切换到另一张图片。
<!DOCTYPE html>
<html>
<head>
<title>CSS Sprites</title>
<style type="text/css">
div{
width:76px;
height:76px;
background: url(https://www.liyongzhen.com/docs/images/sprit.png);
background-repeat:no-repeat;
display: inline-block;
}
div.one{
background-position:0px 0px
}
div.one:hover{
background-position:0px -76px
}
div.two{
background-position:-76px 0px
}
div.two:hover{
background-position:-76px -76px
}
</style>
</head>
<body>
<h1>软件开发，成就梦想</h1>
<h2>学编程，上利永贞网 https://www.liyongzhen.com/</h2>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
background-position 属性有两个值，第一值表示水平位置，正值表示往前，负值表示往后。第二个表示垂直位置，正值表示往上，负值表示往下。
background-position 属性值需要慢慢调整，细心+耐心就能做好。
盒子大小背景图像大小可以调整。这里我们使用默认的大小。
计算结果GIF动画：
标签：76px,Css,background,position,div,Sprites,CSS,图片 来源： https://www.cnblogs.com/lszw/p/10768748.html