龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > div+css/html >

css alpha 透明属性说明

时间:2012-12-29 08:41来源:未知 作者:admin 点击:
分享到:
opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持Firefox、Safari和 Opera. filter:alpha(opacity=50); 这个是为IE6设的,可取值在0-100,其它三个0到1. -moz-opacity:0.5; 这个是为了支持一些老版本的
opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持Firefox、Safari和 Opera. filter:alpha(opacity=50); 这个是为IE6设的,可取值在0-100,其它三个0到1. -moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。

看代码

 代码如下
<div class="top">    <div class="sub">css opacity attribute!</div></div>

以上结构,如果设置top的opacity属性来达到透明效果时,你会发现,里面的元素全部继承了透明的效果,这显然不能达到要求。至少字体总得看的清楚吧。
从网上搜罗了下相关知识点

先给出标准的css透明写法,兼容大部分浏览器

 代码如下
.top {    filter:alpha(opacity=50);    -moz-opacity:0.5;    -khtml-opacity: 0.5;    opacity: 0.5;}

上面的几个属性分别是:


opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持Firefox、Safari和 Opera.
filter:alpha(opacity=50); 这个是为IE6设的,可取值在0-100,其它三个0到1.
-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
-khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。
上面的例子涉及到透明属性的继承问题

 


精彩图集

赞助商链接