用来设定元素透明度的 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. windows远程复制中断无法复制

    关掉对应的rdpclip进程,再创建一个

  2. mnist数据集探究

    一.mnist的属性和方法 为了方便我只检查了后20个属性和方法 from tensorflow.examples.tutorials.mnist import input_data mnist = ...

  3. [bash-shell]构建WebAPI项目并且发布到本地

    :: 清理log文件 del /S *.log echo Publish parameters initializing... ::These parameters are not used for ...

  4. fiddler抓包-2-5分钟学会手机端抓包

    前言 小伙伴们在前篇是否学会了简单的电脑web或其它软件抓包了呢?今天小编给大家带来的是fiddler设置手机代理抓手机端的数据包. 大致流程如下: 1.准备一台wifi功能正常的真机或虚拟机:2.设 ...

  5. prometheus exporter简介

    一.服务分类 在线服务:请求的客户端和发起者需要立即响应(高并发.低延迟:并发数.接口响应时间.错误数.延迟时间),面对突发流量能进行资源的自动伸缩 离线服务:请求发送到服务端但不要求立即获取结果(监 ...

  6. HTML+css基础 img 标签的属性

    img: src=”” src是标签的属性 等号右边是属性值.就是图片的路径. 路径 1. 绝对路径:按照一个路径能找到,具体到某一个盘符下,某一个文件夹内. 2. 相对路径:以当前页面为参考物,去查 ...

  7. 如何在 ubuntu 下使用 Windows 里面的字体

    01. 02. 03. 04. 谢谢浏览!

  8. RecyclerView预览数据

    我们在布局文件里定义RecyclerView时,可以使用tools属性预览数据,如下: <android.support.v7.widget.RecyclerView android:layou ...

  9. 人生苦短,我用Python(目录)

    目前Django分类的文章正在整顿中,届时将呈现更加丰富的内容,另外整体排版也将会更改,感谢支持!! 一.Python基础 二.并发编程 三.数据库 四.Web 五.Python Web 框架 六.爬 ...

  10. SpringMVC重要注解 @ControllerAdvice

    @ControllerAdvice,是Spring3.2提供的新注解,从名字上可以看出大体意思是控制器增强.让我们先看看@ControllerAdvice的实现: package org.spring ...