武汉web培训
达内武汉中心

15827352908

热门课程

Pixy图像翻转和CSS精灵

  • 时间:2016-06-16 10:23
  • 发布:gemlee
  • 来源:web前端网

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

马上预约七天免费试听课

姓名:

电话:

上一篇:武汉web培训:CSS Sprites技术
下一篇:CSS控制文本自动换行

web前端学习容易犯的错误

web1702“诱人”活动

抽象类和抽象方法

jquery的ajax和getJson跨域获取json数据

选择城市和中心
贵州省

广西省

海南省

有位老师想和您聊一聊