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

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

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

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

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

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

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

效果如下图:

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

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

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

  2. 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. Linux-read命令

    转自:http://man.linuxde.net/read read命令 read命令从键盘读取变量的值,通常用在shell脚本中与用户进行交互的场合. 该命令可以一次读取多个变量的值,变量和输入的 ...

  2. fedora23 tweak tool不工作解决方案

    在启动器中打开 优化工具 失败 在终端中开启显示 Traceback (most recent call last): File "/usr/bin/gnome-tweak-tool&quo ...

  3. JVM内存区域介绍

    学习JVM第一个要了解的就是JVM的内存区域. Java虚拟机在运行时会从操作系统内存中划分一部分出来作为JVM内存,而JVM内存又划分为以下几个区域: 大体上可以分为两种: 线程共享数据区 该类型的 ...

  4. (转)java中静态代码块的用法 static用法详解

    一)java 静态代码块 静态方法区别一般情况下,如果有些代码必须在项目启动的时候就执行的时候,需要使用静态代码块,这种代码是主动执行的;需要在项目启动的时候就初始化,在不创建对象的情况下,其他程序来 ...

  5. 利用Unity制作“表”

    一枚小菜鸟   目前没发现在Unity有其他路径制作类似于c# WinForm中的表:但是利用Unity自带的UGUI,制作了一张"伪表",具体方案如下: 效果图如下: 步骤: 1 ...

  6. 读《UNIX编程艺术》一感

    我记得早在2006年的时候就开始频繁使用awk做文本处理方面的工作,07年的时候周围有人用perl,我还感到很不解,觉得写得很复杂,没有awk one liner 那么方便和神奇.一直在了解awk的具 ...

  7. 控制input标签中只能输入数字以及小数点后两位

    js 代码如下: /* 控制input标签中只能输入数字 和小数点后两位 */ function checkNum(obj) { //检查是否是非数字值 if (isNaN(obj.value)) { ...

  8. weblogic部署脚本

    #!/bin/bash #-- #writen lxh dir_war=/home/weblogic/war dir_app=/servyouapp/weblogic/user_projects/do ...

  9. jQuery Mobile 中创建按钮

    在 jQuery Mobile 中创建按钮 jQuery Mobile 中的按钮可通过三种方法创建: 使用 <button> 元素 使用 <input> 元素 使用 data- ...

  10. 【WMware】关于VMware服务器虚拟化管理之服务器容量扩充

    将服务器物理资源抽象成逻辑资源,让一台服务器变成几台甚至上百台相互隔离的虚拟服务器,我们不再受限于物理上的界限,而是让CPU.内存.磁盘.I/O等硬件变成可以动态管理的“资源池”,从而提高资源的利用率 ...