当前位置:海盈网站工作室 >> 新闻中心 >> 设计前沿

CSS禅意花园 - 图片 - 日式花园(二)

点击数:17922012-10-07 17:04:52 来源: 海盈网络

    3. PNG
    PNG格式在有些方面与GIF类似,但它提供了两种色深模式:24位和8位。24位色深的PNG文件通常都很大,但却能保证完整无损。原始图片的所有细节都将被精确的保留。8位色深的PNG文件使用了类似GIF的颜色索引。但很多时候,同样设置下用PNG压缩的图像要比GIF更小。

    由于PNG同时支持这两种色深模式,所以理论上它可以用于任何图像。但实际上最好还是用GIF和JPEG,前者用于带有大块相同颜色区域的图像,后者用于照片等色彩、细节丰富的图像。24位色身的PNG文件虽然能够做到完全无损,但这却是以增加文件大小的代价换来的。

    PNG还支持两种模式的透明度设置:1位(bit)或8位。前者与GIF的行为一样,而后者则能够实现256级的透明度。当我们无法预知图像在Web页面中所处区域的背景颜色时,8位的透明度模式将非常实用。但不幸的是,浏览器支持问题却让PNG的透明度支持大打折扣。其中最明显的就是Windows平台上的IE浏览器,它无法正确呈现出PNG的透明度设置。

    4.1.3 透明度限制

    虽然计算机领域中仍有很多其他图像格式,但只有上面介绍的这三种才适合在Web中使用。JPEG根本不支持托名度,GIF的1位透明度设置又显得太简陋,但PNG所支持的8位透明度又不能被最流行的浏览器识别。这个问题已经由来已久了,甚至于CSS也没有什么关系。在过去的十年中,Web中的透明效果只能由一种方法实现,那就是模拟——预先设计并呈现好整个图像,包括其中的版透明效果,然后以无透明度的文件格式保存。

    在Japancese Garden中,Kawachi将内从放在了看起来似乎半透明的栏中,透过这一栏甚至还能隐约看到作为背景的绿色的树叶。虽然并不支持这种类型的半透明设置,但Kawachi还是选用了GIF。其版透明效果的实现不是在浏览器中完成的,而是在Adobe Photoshop中直接使用图层技术做出的效果,然后直接保存为IGF。文本栏中作为背景的图像其实也根本没有用到任何透明设定——不过是普通的完全不透明图像而已。虽然最终效果看上去像是有半透明效果,但这却是通过在图像处理软件中预先处理得到的。
【责任编辑:(Top) 返回页面顶端