当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 让IE ff Opera同时支持Alpha透明的方法

CSS样式表
Pjblog模板制作教程 超强推荐
(X)HTML Strict 下的嵌套规则
BUTTON和INPUT的区别
css 命名规范
各浏览器padding、margin的差异
IE浮动边界BUG延伸探讨
激发你的灵感:50个优秀的Favicons
Lesson01_08 图像地图
Lesson03_01 什么是CSS和CSS的设置方式
[转]Accesskey引起的一点点思考
CSS仿淘宝首页导航条布局效果
Css利用js的expression实现的效果
Web标准学习资源(书籍、网站)推荐
DIV+CSS 滑动门技术的简单例子
给自己的网站制作一个favicon.ico图标的实现方法
100%点击区的滑动门代码
用js实现的DIV+CSS编辑器代码
css条件注释理论及实践源文件
CSS条件注释的使用详解教材
针对浏览器隐藏CSS之独孤九剑

CSS样式表 中的 让IE ff Opera同时支持Alpha透明的方法


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 74 ::
收藏到网摘: n/a

图片的透明效果是网页中需要用到的一种特殊形式,虽然不是非常的常用,但是遇到这样的需求往往有点措手不及。 我们今天共同学习一下CSS Alpha透明相关的知识。
关于CSS Alpha透明的相关知识。先请看如下代码:
复制代码 代码如下:

filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* Moz + FF */
opacity: 0.5; /* 支持CSS3的浏览器(FF 1.5也支持)*/

  简单解释,IE使用私有属性filter:alpha(opacity),Moz Family使用私有属性-moz-opacity,而标准的属性是opacity(CSS 3, Moz Family部分支持CSS3)。后面的数值是透明度,使用百分比或者小数(alpha(opacity))使用大于0小于100的数值,其实也是百分比)。
  从上面的代码中你没有看到Opera。没错,Opera还未支持标准的opacity,也没有其私有的可支持Alpha透明的属性。
  但是,我们知道,Opera是支持Alpha透明的PNG图片的(当然Moz Family也支持)。所以我们可以使用背景图片来实现Alpha透明效果。
  关键在于:
复制代码 代码如下:

background:transparent url(alpha80.png) left top repeat!important;
background:#ccc;
filter:alpha(opacity=50);

  既然Moz Family支持Alpha透明的PNG,所以我们没有必要使用其私有属性了。当然,你可以使用标准的opacity,但别同时使用Alpha透明图片和opacity,这样的话就成了两者的混合了。你可以把上面的例子下载过来,然后/*opacity:.5;*/的注释看看。