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

最新推荐文章于 2018-09-09 11:30:17 发布

何东狮吼

最新推荐文章于 2018-09-09 11:30:17 发布

阅读量1.3k

点赞数

分类专栏： css 文章标签： css javascript 服务器搜索引擎测试 url

本文链接：https://blog.csdn.net/hedong37518585/article/details/6621184

版权

css 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!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把文字偏移到按钮区域外，只要肉眼看不见即可。对于搜索引擎来说一样可以读到内容的，另外也便于自己以后的维护，如果只是有元素但是没有文字内容，通过代码和图片名，你也猜不到这个按钮的作用，特别是时间长了肯定会忘记的，留着的话便于日后维护这部分代码。