用一张图片实现水平和垂直方向点状线背景

众所周知,IE6是不支持dotted边框的,显示的效果和dashed一样。如果为了美观,就需要用到背景图片了。

之前做这些竖直和水平的点状线,经常是分别做一张点状线的背景图片来对应实现。
最近做页面的时候忽然想出下边的图片来:

网页图像优化技巧

设计之美

身为一个网页前端开发人员,不免要经常处理一些图片。如何使图片体积更小,质量又有保证是一个问题。

图像格式概念:

.gif格式适合于动画、透明等类型图片。如果要做透明背景的logo,可以考虑输出.gif格式的,但是要注意,.gif格式透明虽然是IE6也支持的,但是它所支持的透明度较差,应用在某些颜色背景上时可能会时图片出现毛刺和白边等。.gif也适用于图片颜色较为单一的时候使用。

.png格式是一种比较好的图片格式,根据支持的色位,又分为png-8和png-24。png-8较好的一点是透明度效果好,且也被IE6支持。如果输出为png-24格式的包含透明度的图片,那就会在IE6下失去透明度,成为白色背景。如果图片颜色不是很复杂,但是也不是很单一的话,试试png-8格式,一般会比.gif格式体积更小。

.jpg(jpeg)格式适用于颜色丰富的图片,比如产品图片,风景,人像摄影等。但是不支持透明度和动画。用PS输出此类图片时,一般质量设为60-70%就比较合适了,可以兼顾到质量和体积。