一、一张图片完成圆角矩形的效果
![](https://i-blog.csdnimg.cn/blog_migrate/bfd9597fcc6ce2776ceb12a634b37964.jpeg)
为了避免界面的过于死板,设计人员经常会设计出圆角矩形的板块来放置内容。对于开发人员来说,这往往又成为一种负担。在用table的时代,人们往往会把圆角矩形分块切成四块,把表格弄成九宫格,在四个角上分别塞上四张圆角图片。至于四面的边框,比较理想的做法则是设置border。
到div的时代,大家会考虑用float的div浮动到四个角上,分别将其背景图片设置成切下来的四张图片,边框再想另外的办法进行设置。
不过这种方法其实还是换汤不换药,只不过把表格换成div,把img换成背景图片,其基本的思路还是如下图一样支离破碎。
![](https://i-blog.csdnimg.cn/blog_migrate/8e915cec4cc2b110b1079a81a349b536.jpeg)
上图显示的是圆角矩形右上角的一段代码,看右边的css代码可知,这个div被float:right设置到了右边,然后被position:relative,right:-1px,top:-1px等样式使其往外边框的顶部和右边凸出1px的距离,从而将原来在此处的直线边框覆盖住,让其外表显示为图片上的曲线。而图片显示的位置则被background-position:right top设置为显示右上角的部分,从而实现将图片化整为零的效果。举一反三,其他角上的效果也可以通过同样的办法实现。
在实际应用中,可能一个页面上会存在若干个不同的圆角矩形效果。有的颜色不一样,有的圆角直径不一样,则可以将css中公用的部分提取出来,只用额外再加上很少部分的代码就能生成不同效果的圆角矩形。比如像下面这样的代码:
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
![](/Images/dot.gif)
![](/Images/dot.gif)
![](/Images/dot.gif)
![](/Images/dot.gif)
![](/Images/dot.gif)
![](/Images/dot.gif)
![](/Images/dot.gif)
![](/Images/dot.gif)
比如:
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
将四个圆角的图片放在一张图片上,就将四次请求减少为一次了。对于像百度hi这样的高访问量页面来说,这笔帐算得可真是精明。
二、一张图片完成鼠标翻转的效果
web开发中经常要用到的效果就是鼠标翻转,比如鼠标没有移上去时,是一个样子,鼠标移上去时就将图片高亮显示。这种操作很容易实现,鼠标over时换一个样式,out时又换回原来的样式就ok了,而在两个样式中定义不同的背景图片就可以了。不过,在第一次将鼠标移上去时,因为需要加载一张原来不存在的图片,就需要新加载一幅图片。在某些时候,由于网络的原因,可能会出现需要等待几秒才能显示图片,或者图片在切换时引起一些闪动,都会给用户带来不好的体验。
以前也做过一些相应的技巧处理。最常规的办法就是对图片进行预加载。在鼠标移上去的时候,图片已经下载下来了,从而可以通过缓存直接访问到图片,而不用再次发起一次请求。这样做当然能让前面那几个问题迎刃而解。
不过,事情可以处理得更漂亮一些,flickr就这么做了。在选择要上传的图片以后,flickr会将选择的图片以列表形式展开,列表右边有一个小垃圾箱的标志,用来表示删除此图片而不上传。当鼠标以上去的时候,图片颜色会加深一些。按照常规,这应该会发起一次新的请求,不过通过firebug的net来看,并没有什么新的请求产生。再通过对其css样式的分析,发现竟然使用了同一张图片,当鼠标移上去的时候,只不过将图片挪动了一下位置,从而展示出另一番效果而已。不妨来看看:
![](https://i-blog.csdnimg.cn/blog_migrate/556f3afcc2f630c2dbeb9a21177f3912.jpeg)
总结来说,其实都是通过background-position这个属性来设定背景图片的位置,而又总是只让图片展示一部分内容,从而实现不同的展示效果。一方面,将多张图片浓缩到一张图片来说,因为图片颜色值的相近和图片的压缩技术,肯定能比原来的多张图省去一些存储空间,也更加便于对图片进行有效的管理。另一方面,能将对服务器的几次请求减小到一次,从而有效地减轻服务器的负担。有这样的一件好事,何乐而不为呢?