网络编程
位置:首页>> 网络编程>> 网页设计>> 使用单通道实现半透明效果

使用单通道实现半透明效果

 来源:豆豆猫的窝 发布时间:2009-12-12 17:40:00 

标签:png,半透明,通道,css

众所周知,IE 6只支持单通道的PNG图片(即只有透明/不透明2种状态,gif图片的透明单通道透明),因此如果需要使用alpha透明的png图片时,往往需要对IE6设定滤镜来完成。

本文这里介绍一个单通道的PNG-8(gif也可)图片实现半透明效果的方法,不是万能的,在某些情况下适用。

先看下效果图:

a:hover有半透明的背景色,对于大部分浏览器,都可以使用alpha透明的png-32图片来完成此效果,而对于IE6,可以采取一个变通的办法,使用一种栅格的方法来模拟半透明。


在Fireworks里面建立一个透明背景的文件,就可以看到画布内显示的是白色和灰色交加的图案,如下图所示。

其实这就是我们借鉴的原理——白色为不透明区域,灰色区域为透明区域——来模拟半透明的效果,如下图所示。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com