用来设定元素透明度的 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. python3中用django下载文件,中文名乱码怎么办?

    前段时间被某个前端小可爱鄙视了一下,说我博客都一年不更新了,我不服,明明还有俩月才到一年呢.不过说是这么说,还是要更新一下的. 以上都是借口,下面开始正文.     我公司的某个内部系统,用djang ...

  2. 零次学习(Zero-Shot Learning)入门(转)

    很久没有更文章了,主要是没有找到zero-shot learning(ZSL)方面我特别想要分享的文章,且中间有一段时间在考虑要不要继续做这个题目,再加上我懒 (¬_¬),所以一直拖到了现在. 最近科 ...

  3. SpringBoot第十五篇:swagger构建优雅文档

    作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/11007470.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言   前面的十四 ...

  4. springmvc项目转为springboot

    说明 如果你的项目连maven项目都不是,请自行转为maven项目,在按照本教程进行. 本教程适用于spring+springmvc+mybatis+shiro的maven项目. 1.修改pom文件依 ...

  5. jdk1.8 Stream 特性总结

    不是数据结构 它没有内部存储,它只是用操作管道从 source(数据结构.数组.generator function.IO channel)抓取数据. 它也绝不修改自己所封装的底层数据结构的数据.例如 ...

  6. 在Button样式中添加EventSetter,理解路由事件

    XML <Window.Resources> <Style x:Key="ButtonStyle2" TargetType="{x:Type Butto ...

  7. 直接操作DOM一定比虚拟DOM操作耗时,diff算法,key值,虚拟 DOM的定义

    直接操作DOM一定比虚拟DOM操作耗时吗? 或者一次直接DOM操作一定比一次虚拟DOM操作耗时吗? 1)虚拟DOM的本质就是一个JS对象,虚拟DOM减少了真实DOM的操作,当修改数据的时候,就是修改虚 ...

  8. 【07】Kubernets:资源清单(控制器 - DaemonSet)

    写在前面的话 前面讲解了 Pod / ReplicaSet / Deployment 的资源清单,我们这里谈一下 DaemonSet 的资源清单. 之前说过,DaemonSet 控制器能够保证资源在每 ...

  9. .NET MVC 支付宝支付(即时到账)

    已经好久没有搞过.NET了,朋友有一个网站 ,需要接入支付宝功能,重新对接了一下. 1.开发前,需要一个企业支付宝账号登录,获取 PID和 配置密钥 官方文档:https://docs.open.al ...

  10. windows配置flutter的注意点

    参考官网配置:https://flutter.cn/docs/get-started/install/windows 注意点: 1. 配置好环境变量后,必须重启电脑才有效果(后面还有需要重启的,所以到 ...