用来设定元素透明度的 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 / );    /**//* 老版Mozilla */
object.KhtmlOpacity = (opacity / );    /**//* 老版Safari */
object.opacity = (opacity / );    /**//* 支持opacity的浏览器*/

效果如下图:

opacity兼容性问题的更多相关文章

  1. opacity兼容性以及存在问题处理

    opacity兼容性以及存在问题处理 opacity兼容性 opacity属性是CSS3的属性,用于设置元素的不透明级别.语法: opacity: value | inherit; ①值value表示 ...

  2. javascript opacity兼容性随笔

    一.CSS兼容代码 .transparent { filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* FireFox old version ...

  3. 【原】CSS实现背景透明,文字不透明,兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  4. CSS实现背景透明,文字不透明,兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  5. CSS实现背景透明,文字不透明(兼容所有浏览器)

    我们平时所说的调整透明度,其实在样式中是调整不透明度,如下图所示例: 打开ps,在图层面板上,可以看到设置图层整理不透明度的菜单,从 0% (完全透明)到 100%(完全不透明). 实现透明的css方 ...

  6. javascript中一些常见的兼容性问题

    下面是一些Javascript的IE和Firefox(火狐)兼容性的常用例子 1. document.formName.item("itemName") 问题 说明:IE下,可以使 ...

  7. 兼容性背景颜色半透明CSS代码(不影响内部子元素)

    如何简单兼容性的实现父元素是半透明背景色,而子元素不受影响. 兼容所有浏览器的背景颜色半透明CSS代码: background-color: rgba(, , , .); filter: progid ...

  8. CSS 多浏览器兼容性问题及解决方案

    兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 ...

  9. CSS实现兼容性的渐变背景(gradient)效果

    利用css 3实现渐变可以很方便的更改它的颜色,并且能够减少图片的制作,但是它的兼容性并不好,下面的代码就是实现利用css 渐变兼容的代码: .gradient{ width:300px; heigh ...

随机推荐

  1. 爬虫解析库:XPath

    XPath     XPath,全称 XML Path Language,即 XML 路径语言,它是一门在 XML 文档中查找信息的语言.最初是用来搜寻 XML 文档的,但同样适用于 HTML 文档的 ...

  2. Computer-Hunters——冲刺总结

    Computer-Hunters--冲刺总结 一.作业相关 作业相关 具体描述 所属班级 2019秋福大软件工程实践Z班 作业要求 团队作业第五次-项目冲刺 作业正文 hunter--冲刺总结 团队名 ...

  3. java包学习之JDBC

    public class DemoJDBC { public static void main(String[] args) throws ClassNotFoundException, SQLExc ...

  4. FontForge:免费字库设计软件 附使用教程

    引用:http://www.sucaijishi.com/2018/articles_0817/259.html 如何设计一套自己的字库?今天分享一个开源的字库设计软件FontForge, 官方下载: ...

  5. Java 并发编程-不懂原理多吃亏(送书福利)

    作者 | 加多 关注阿里巴巴云原生公众号,后台回复关键字"并发",即可参与送书抽奖!** 导读:并发编程与 Java 中其他知识点相比较而言学习门槛较高,从而导致很多人望而却步.但 ...

  6. Shell脚本——添加和删除用户

    写一个脚本admin_user.sh,其用法格式为: admin_user.sh --add USERLIST --del USERLIST -v|--verbose -h|--help 其中, -h ...

  7. PHP 命名空间笔记

    PHP 命名空间笔记 1.php文件代码如下<pre><?php//我用这样的命名空间表示处于blog下的article模块namespace Blog\Article; class ...

  8. ArrayList 源码分析 基于jdk1.8:

    1:数据结构: transient Object[] elementData;  //说明内部维护的数据结构是一个Object[] 数组 成员属性: private static final int ...

  9. 【Hyper-V】尝试启动选定的虚拟机时出错 32788

    错误描述 遇到问题如往常一般搜索了一番(好久没搜索问题了)忽然发现,现在百度文章质量较前几年差太多...怪不得那么多人转搜狗搜索(搜微信文章) PS:有些说是目录权限问题,有些是说虚拟磁盘删了重新加载 ...

  10. .Net Core 学习路线图

    今天看  草根专栏 这位大牛的微信公众号,上面分享了一张来自github的.net core学习路线图,贴在这里,好让自己学习有个方向,这么一大页竟然只是初级到高级的,我的个乖乖,太恐怖了. 感谢大牛 ...