CSS学习，Pixy图像翻转和CSS精灵

来源：互联网发布：python3 爬虫知乎编辑：程序博客网时间：2024/06/18 13:58

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>测试Pixy</title><style>a{display:block;width:100px;height:50px;text-indent:-200px;background:url(bj.png) -100px 0 no-repeat;}a:hover, a:focus{background-position: left top;}a:active{background-position: right top;}</style></head><body><a href="javascript:;">确定</a></body></html>

没有用到图片，通过CSS改变链接的背景色，悬停的背景色，按下的背景色，这个是简单的翻转

背景式样使用了图片，并且通过CSS改变默认背景图片，鼠标悬停背景图片，鼠标按下背景图片，这样的切换效果叫图像翻转，每个状态调用一个单独的图片

而把这3个图片整合起来，变成一个图片，并且CSS通过图片定位来显示背景，这个技术就叫Pixy图像翻转

好处就是为了减轻多个图片请求对服务器的压力，只需一张整图就可以完成一个翻转效果

更进一步，如果整站上所有的小图标，按钮，背景图都整合到一个大图，这个技术就称为CSS精灵，这样对服务器的压力会大大减轻，并且加快了下载速度，因为每个单独的下载之间都会有间隔时间，而整合成一个大图就不存在很多个小图下载的间隔时间了，这个各位应该在传FTP文件的时候有感触，一个几十M的单一文件远比几M的但是几百几千个零碎文件用的时间来的短，另外一个好处就是便于维护图片，所以这个方法非常值得推广。

另外，关于上面的按钮，我现在的图片上是没有文字的，如果我在PS或者fireworks里面已经把文字做上去了，比如“确定”，那么我标签元素内的文字尽量不要删除，可以用text-indent把文字偏移到按钮区域外，只要肉眼看不见即可。对于搜索引擎来说一样可以读到内容的，另外也便于自己以后的维护，如果只是有元素但是没有文字内容，通过代码和图片名，你也猜不到这个按钮的作用，特别是时间长了肯定会忘记的，留着的话便于日后维护这部分代码。