当前位置: 代码迷 >> Web前端 >> 一张图片变更多种花样
  详细解决方案

一张图片变更多种花样

热度:167   发布时间:2012-10-12 10:17:04.0
一张图片变化多种花样

web2.0的世界中,javascript的作用日趋重大,集中了开发人员的很多精力;但在这个世界中,CSS也同样需要引起人们的重视。一个成熟的网 站,标志之一就是其浏览器兼容性。在web开发中,核心的逻辑业务可能花两小时可以搞定,但要做到对各个浏览器的兼容,花上两天也不一定能把所有问题都解 决掉。而其中最主要的,还是由于各个浏览器对于css的解释不太一致。在要用js开发某些小功能的时候,最大的障碍往往不是想法,而是那些难以逾越的兼容 性问题。对付这些,开发人员的经验非常重要。这是一直以来的一些想法,不过这篇文章要讨论的,是一些个CSS方面的技巧。应用这些技巧,往往能在细节方面 减轻服务器的负担,而这些,又是很容易做到的,只不过是人们还没有认识到而已。

一、一张图片完成圆角矩形的效果


为了避免界面的过于死板,设计人员经常会设计出圆角矩形的板块来放置内容。对于开发人员来说,这往往又成为一种负担。在用table的时代,人们往往会把 圆角矩形分块切成四块,把表格弄成九宫格,在四个角上分别塞上四张圆角图片。至于四面的边框,比较理想的做法则是设置border。

到div的时代,大家会考虑用float的div浮动到四个角上,分别将其背景图片设置成切下来的四张图片,边框再想另外的办法进行设置。

不过这种方法其实还是换汤不换药,只不过把表格换成div,把img换成背景图片,其基本的思路还是如下图一样支离破碎。

?

说它是支离破碎的思想,其实也是在看过百度hi首页对圆角矩形的css样式设计以后才这么认为的――因为他们的设计才是真正的简单实用,其模型就是一个边 框和一个圆形图片。直角矩形加上矩形,然后在四个角上放上四个小正方形,背景图通过对background-position的设置分别显示圆形图片的各 个部分,这样就化整为零,实现了圆角矩形的基本模型了。接下来,将四个小正方形分别往外挪动1px的举例,就把四个角上原来的边框覆盖掉了。不妨来直接看 看百度hi的首页:



上图显示的是圆角矩形右上角的一段代码,看右边的css代码可知,这个div被float:right设置到了右边,然后被 position:relative,right:-1px,top:-1px等样式使其往外边框的顶部和右边凸出1px的距离,从而将原来在此处的直线 边框覆盖住,让其外表显示为图片上的曲线。而图片显示的位置则被background-position:right top设置为显示右上角的部分,从而实现将图片化整为零的效果。举一反三,其他角上的效果也可以通过同样的办法实现。

在实际应用中,可能一个页面上会存在若干个不同的圆角矩形效果。有的颜色不一样,有的圆角直径不一样,则可以将css中公用的部分提取出来,只用额外再加上很少部分的代码就能生成不同效果的圆角矩形。比如像下面这样的代码:
.rect,.rect2 { } { width : 8px ; height : 8px ; position : relative ; overflow : hidden ; font-size : 1px ; } .rect2 { } { width : 10px ; height : 10px ; } .c1 { } { background-position : left?top ; top : -1px ; left : -1px ; float : left ; } .c2 { } { background-position : right?top ; top : -1px ; right : -1px ; float : right ; } .c3 { } { background-position : left?bottom ; bottom : -1px ; left : -1px ; float : left ; } .c4 { } { background-position : right?bottom ; bottom : -1px ; right : -1px ; float : right ; } .cb { } { background-image : url(/img/home/circle.gif) ; } .cb2 { } { background-image : url(/img/home/circle2.gif) ; }
在使用的时候,c1,c2,c3,c4是公用的部分,定义了四个角上的样式,rect,rect2定义了四个角的大小,cb,cb2定义了圆角部分的背景图片,通过对这几个样式的联合使用,就可以创造两种不同圆角矩形效果了。
比如:
< div? style ="border:solid?1px?#F2F2F2;" >
????
< div? class ="rect?c1?cb" ></ div >
????
< div? class ="rect?c2?cb" ></ div >
????圆角矩形1
????
< div? class ="rect?c3?cb" ></ div >
????
< div? class ="rect?c4?cb" ></ div >
</ div >

< div? style ="border:solid?1px?#F4F4F4;" >
????
< div? class ="rect2?c1?cb2" ></ div >
????
< div? class ="rect2?c2?cb2" ></ div >
????圆角矩形2
????
< div? class ="rect2?c3?cb2" ></ div >
????
< div? class ="rect2?c4?cb2" ></ div >
</ div >

将四个圆角的图片放在一张图片上,就将四次请求减少为一次了。对于像百度hi这样的高访问量页面来说,这笔帐算得可真是精明。

二、一张图片完成鼠标翻转的效果
web开发中经常要用到的效果就是鼠标翻转,比如鼠标没有移上去时,是一个样子,鼠标移上去时就将图片高亮显示。这种操作很容易实现, 鼠标over时换一个样式,out时又换回原来的样式就ok了,而在两个样式中定义不同的背景图片就可以了。不过,在第一次将鼠标移上去时,因为需要加载 一张原来不存在的图片,就需要新加载一幅图片。在某些时候,由于网络的原因,可能会出现需要等待几秒才能显示图片,或者图片在切换时引起一些闪动,都会给 用户带来不好的体验。

以前也做过一些相应的技巧处理。最常规的办法就是对图片进行预加载。在鼠标移上去的时候,图片已经下载下来了,从而可以通过缓存直接访问到图片,而不用再次发起一次请求。这样做当然能让前面那几个问题迎刃而解。

不过,事情可以处理得更漂亮一些,flickr就这么做了。在选择要上传的图片以后,flickr会将选择的图片以列表形式展开,列表右边有一个小垃圾箱 的标志,用来表示删除此图片而不上传。当鼠标以上去的时候,图片颜色会加深一些。按照常规,这应该会发起一次新的请求,不过通过firebug的net来 看,并没有什么新的请求产生。再通过对其css样式的分析,发现竟然使用了同一张图片,当鼠标移上去的时候,只不过将图片挪动了一下位置,从而展示出另一 番效果而已。不妨来看看:
鼠标没有移上去是,background-position为0px 50%,而鼠标移上去是,background-position变成了-10px 50%,从而将另外一半图片显示出来。这种做法,无异于对用户进行了一次小小的魔术表演,用他们非常简单的手法演绎出非常精美的变换。

总结来说,其实都是通过background-position这个属性来设定背景图片的位置,而又总是只让图片展示一部分内容,从而实现不同的展示效 果。一方面,将多张图片浓缩到一张图片来说,因为图片颜色值的相近和图片的压缩技术,肯定能比原来的多张图省去一些存储空间,也更加便于对图片进行有效的 管理。另一方面,能将对服务器的几次请求减小到一次,从而有效地减轻服务器的负担。有这样的一件好事,何乐而不为呢?
  相关解决方案