opacity 是 CSS3 里的一个属性样式，它可以实现任意元素（文字、图片、层）的半透明效果，由于是 CSS3 才支持，所以 IE6、IE7 都无法直接实现，但是我们可以用 alpha 滤镜来解决这个问题。半透明样式代码可以这样写：
1 2 3 4 5 6 | .opacity{ filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* 老版Mozilla */ -khtml-opacity:0.5; /* 老版Safari */ opacity: 0.5; /* 支持opacity的浏览器*/ } |
opacity 在 CSS2.0 手册里是这样解释的：
opacity 是 alpha 滤镜的一个可选参数，设置或检索透明渐变的开始透明度。取值范围为 0 – 100 。默认值为 0 ，即完全透明。 100 为完全不透明。
下面来看看实例页面：
http://www.vcbb.net/blog/blog-archives
我们可以看到页面中的所有“图片区域”都蒙上了一层半透明的灰色“蒙板”，当鼠标移动上去后“蒙板消失”，这种效果运用在图片站上非常不错。在这里每一个“图片区域”里虽然包括了图片和标题两部分，但我将整个“图片区域”做成固定的宽高，然后 display:block; 最后将这个图层加上 opacity 的效果。
具体的样式代码我就不贴出来了，大家可以用 firebug 就能直接看到了，而且效果是多样的，代码也是灵活的。需要注意的是想要做成我这个实例页面里的效果需要对半透明层上的 a 和 a:hover 这2个样式特别的定义一下～
zEUS.
- 原文链接:
- 转载原创文章请注明:
Name : zEUS.
原来如此，想来VIKIWORKS的主题效果就是用这实现的吧
学习收藏了！
哇，效果确实很不错。
这种页面设计在复杂条件下有些浏览器会假死的
恩，不错，一直以为是用CSS Sprites，然后图片定位做出的效果
IE6下能不用margin就别用，都用padding吧
滤镜确实是不错的东东
强 厉害了
内页，侧边栏错位了···
我在网吧 IE6 测试 hoho