精灵图，背景图，图片是一个网页的重要组成部分，所以学习与整理就变得有点重要了。
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。
大部分情况下，精灵图都是网页美工做。
我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。
我们精灵图的宽度取决于最宽的那个背景。
我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。
在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 25px; height: 25px; background: url("images/taobao.png"); background-position: 0px 0px; } div:hover { background-position: 0px -89px; } /*如果使用精灵图:坐标:只有0或者负数*/ </style> </head> <body> <div></div> </body> </html>
二：背景图片和插入图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>40-css背景图片和插入图片的区别.html</title> <style> div{ width: 200px; height:200px; background-color: red; } .box1{ background-image: url("images/image.png"); background-repeat: no-repeat; background-position: right bottom; } </style> </head> <body> <!-- 1,背景图片和插入图片的区别? (1),背景图片仅仅是一个装饰,你不会占用位置,插入图片会占用位置 (2),背景图片有定位属性,很方便的控制图片的位置,插入图片没有定位属性 (3),插入图片的语义比背景图片的语义要强,所以在企业开发中你的图片如果从想让搜索引擎收录,那么推荐使用插入图片 --> <div class="box1">我是一个文字</div> <div class="box2"> <img src="images/image.png" alt=""> 我是文字 </div> </body> </html>