CSS 图像高级 Css Sprites
上节课中我们学习了背景图像，这节课我们学习背景图像的高级知识，如Css Sprites，CSS 背景渐变等。
Css Sprites
Css Sprites，国内也叫CSS精灵。它的原理是将许多的小图片整合到一张大图片中，利用css中的background-image属性，background-position属性定位某个图片位置，来达到在大图片中引用某个部位的小图片的效果。
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。我们需要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动画：
更多精彩
