用来设定元素透明度的 Opacity 是CSS 3里的一个属性。当然现在还只有少部分浏览器支持。

不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari:

IE: filter:alpha(opacity) 
Mozilla: -moz-opacity 
Safari: -khtml-opacity 
很不幸的是,你没看见Opera,老版本的Opera并没有什么私有属性可以代替opacity。(新版Opera已经支持opacity)

所以以前用CSS设定一个元素半透明的话,可能会这样写:

1 .opacity{
2  filter:alpha(opacity=50);       /* IE */
3  -moz-opacity:0.5;              /* 老版Mozilla */
4  -khtml-opacity:0.5;              /* 老版Safari */
5  opacity: 0.5;           /* 支持opacity的浏览器*/
6 }

用javascript来设定一个元素为半透明:

1.object.filter = "alpha(opacity=" + opacity + ")";  /* IE */
2.object.MozOpacity = (opacity / 100);    /* 老版Mozilla */
3object.KhtmlOpacity = (opacity / 100);    /* 老版Safari */
4object.opacity = (opacity / 100);    /* 支持opacity的浏览器*/
5

Opacity多浏览器透明度兼容处理(转)的更多相关文章

  1. Opacity多浏览器透明度兼容处理

    用来设定元素透明度的 Opacity 是CSS 3里的一个属性.当然现在还只有少部分浏览器支持. 不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari: IE: fil ...

  2. CSS 之 Opacity多浏览器透明度兼容处理

    用来设定元素透明度的 Opacity 是CSS 3里的一个属性.当然现在还只有少部分浏览器支持. 不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari: IE: fil ...

  3. IE6 浏览器常见兼容问题 大汇总(23个)

    IE6以及各个浏览器常见兼容问题 大汇总 综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼 ...

  4. IE6 浏览器常见兼容问题 大汇总(23个)[转载]

    IE6以及各个浏览器常见兼容问题 大汇总 综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼 ...

  5. 强制浏览器使用兼容模式,Web.config,httpProtocol

    对于一些政府类的网站,很多支持IE6~8,而不支持使用更高版本浏览器浏览.虽然有些浏览器会自动使用兼容模式,或有些人会手动调整浏览器的兼容模式,但不是每一个人.每一款浏览器都可以做到用兼容模式.所以, ...

  6. JS--事件对象中部份浏览器不兼容方法

    测试时主要用的浏览器是Firefox 28.0.IE11.IE8.Chrome 34.0  一.什么是事件对象:当触发某个事件的时候,会产生一个事件对象,这个对象包含着所有的与事件有关的信息,包括导致 ...

  7. 浏览器 CSS 兼容写法的测试总结

    做前端最讨厌的就是 IE6,7,8,虽然被淘汰的浏览器,但是在中国用户仍然很多,不可能像国外网站一样直接就不管它了,这样会流失很多流量啊. 现在有了IE9,IE10还好些,几乎和 Chrome,Fir ...

  8. Modernizr 测试浏览器是否兼容相应属性

    Modernizr  测试浏览器是否兼容相应属性

  9. Normalize.css源码注释翻译&浏览器css兼容问题的理解

    版本v5.0.0源码地址: https://necolas.github.io/normalize.css/5.0.0/normalize.css 翻译版: /*! normalize.css v5. ...

随机推荐

  1. Android和iOS隐藏状态条

    Android: 在 AndroidManifest.xml 里 <activity android:theme="@android:style/Theme.NoTitleBar.Fu ...

  2. Python 代码性能优化技巧

    选择了脚本语言就要忍受其速度,这句话在某种程度上说明了 python 作为脚本的一个不足之处,那就是执行效率和性能不够理想,特别是在 performance 较差的机器上,因此有必要进行一定的代码优化 ...

  3. C++设计模式——建造者模式

    建造者模式 在GOF的<设计模式 可复用面向对象软件的基础>中是这样说的:将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 这句话,似懂非懂的.一个复杂对象的创建 ...

  4. The Services(服务)

    datastore和运行时环境的关系就是和一个服务的关系:应用使用API访问一个独立的系统(separate system),这个系统管理应用的所有的独立于应用实例的扩展需求(scaling need ...

  5. as3 中trace() 函数对效率的影响

    进行页游开发的过程中,很多开发者都有一个习惯,在数据输出中添加trace()函数来跟踪数值 - 不进行条件编译,发布的时候也不删除.实际上大量的trace函数会降低程序的效率,我们可以用一个简单的例子 ...

  6. PHP网站简单架构 – 单独跑php-fpm

    这个架构比较简单,不做过多的说明 前端1台Nginx:负载均衡+nfs 中间2台php:php-fpm 后端1台数据库:MySQL 安装略,参考<lnmp最新源码一键安装包> 192.16 ...

  7. WebForm中如何防止页面刷新,后退导致的重复提交

    当用户按下浏览器中的 F5 键刷新当前页面时,对这一过程进行检测所需的操作步骤.页面刷新是浏览器对特定用户操作(按 F5 键或单击"刷新"工具栏按钮)的响应.页面刷新操作是浏览器内 ...

  8. 在Android4.0中Contacts拨号盘界面剖析(源码)

      通过在 ViewPager 的适配器对象中,发现过一下三行代码 private DialpadFragment mDialpadFragment; private CallLogFragment ...

  9. iPhone 3GS/4 / 4s/5

    越努力.越幸福.----willingseal. 像素与分辨率有什么区别与联系 ????点击打开链接 像素和分辨率是成正比的,像素越大,分辨率也越高 像素 简单的说,我们通常所说的像素,就是CCD/C ...

  10. Hibernate查询效率对比

    查询已知表名的实体时推荐使用getHibernateTemplate().executeWithNativeSession() + SQLQuery方式. 以下测试使用JUnit进行,仅查询一次,查询 ...