CSS opacity 实例页面

首页 » 网页美化 » 2009-07-15 »

Tag: css , opacity

opacity 是 CSS3 里的一个属性样式，它可以实现任意元素（文字、图片、层）的半透明效果，由于是 CSS3 才支持，所以 IE6、IE7 都无法直接实现，但是我们可以用 alpha 滤镜来解决这个问题。半透明样式代码可以这样写：

.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/photo

CSS opacity 实例页面

我们可以看到页面中的所有“图片区域”都蒙上了一层半透明的灰色“蒙板”，当鼠标移动上去后“蒙板消失”，这种效果运用在图片站上非常不错。在这里每一个“图片区域”里虽然包括了图片和标题两部分，但我将整个“图片区域”做成固定的宽高，然后 display:block; 最后将这个图层加上 opacity 的效果。

具体的样式代码我就不贴出来了，大家可以用 firebug 就能直接看到了，而且效果是多样的，代码也是灵活的。需要注意的是想要做成我这个实例页面里的效果需要对半透明层上的 a 和 a:hover 这2个样式特别的定义一下～

zEUS.