一张图片变更多种花样 _Web前端

一张图片变化多种花样

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