`

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

阅读更多
用来设定元素透明度的 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的浏览器*/

转自:http://www.cnblogs.com/netwenchao/archive/2009/07/16/1525077.html
分享到:
评论

相关推荐

    CSS3中的Opacity多浏览器透明度兼容性问题

    这就导致了在不同浏览器间实现透明度兼容性的问题。 在Internet Explorer(IE)中,为了实现类似的效果,你需要使用其特有的滤镜(filter)属性,具体形式为`filter: alpha(opacity=value)`,其中`value`是0到100...

    多个浏览器透明度设置

    ### 多个浏览器透明度设置 #### 知识点概述 在网页设计中,透明度设置是一项常用的技术,它能够使元素呈现出半透明的效果,从而达到美化页面、增强视觉层次感的目的。不同的浏览器可能采用不同的渲染引擎和技术...

    CSS透明度定义

    本文将深入探讨CSS透明度的概念、不同浏览器下的兼容性问题以及如何通过多种方式来设置透明度。 #### CSS透明度基础概念 透明度是指一个对象或图像能够透过其自身显示背景的程度。在CSS中,可以通过`opacity`属性...

    浏览器兼容性问题处理

    - **背景透明度设置**:对于 IE 浏览器,可以使用 `filter` 属性来设置背景的透明度。 ```css /* IE 中的背景透明度设置 */ div { filter: progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=60); } ``` ...

    详解css透明度之rgba和opacity的区别及兼容

    3. 考虑浏览器兼容性,对于旧版IE(尤其是IE8及更低版本),需要额外的滤镜代码来实现透明度效果。 了解这些基本知识后,你就能更好地掌握如何在CSS中应用透明度,以创建更丰富的视觉效果。在实际开发中,根据项目...

    前端不同浏览器兼容性解决办法

    4. IE滤镜(Filters):对于透明度、渐变、阴影等效果,IE8及以下版本支持使用滤镜,如`filter: alpha(opacity=50);`实现透明度。对于其他浏览器,可以使用`opacity: 0.5;`。 二、JavaScript兼容性问题及解决方案 ...

    css 多浏览器兼容解决方案 下载

    CSS 多浏览器兼容性是Web开发中的重要环节,因为不同的浏览器对CSS的解析方式可能存在差异,这可能导致在不同浏览器中页面展示效果不一致。以下是一些关键知识点和解决方案: 1. **DOCTYPE影响CSS处理**: DOCTYPE...

    PNG透明全兼容

    2. **其他浏览器兼容**:对于其他支持PNG透明度的现代浏览器,可以使用CSS3的`background-image`和`opacity`属性。然而,要确保这些属性在所有浏览器中都有效,可能需要使用`-webkit-`, `-moz-`, `-ms-`, `-o-`等...

    浏览器兼容性解决方法

    对于不透明度的设置,IE使用`filter`属性,而Firefox和其他现代浏览器则使用`opacity`属性。开发者应同时提供两种写法,以确保所有浏览器都能正确渲染。 #### 9. 边框圆角支持 IE对于CSS3的`border-radius`支持较...

    CSS 图像透明度opacity兼容性介绍

    CSS的`opacity`属性允许我们为元素设置一个透明度级别,从而创建出半透明的效果。这个特性在现代网页设计中非常常见,用于创建各种交互式和视觉效果,如按钮、背景图像以及悬浮框等。 `opacity`属性的值范围是从0到...

    浏览器兼容性汇总

    **解决方案**: 使用 `opacity` 属性,以确保跨浏览器的兼容性。 ##### 4. css中的width和padding - **IE和其他浏览器**: 对于盒模型的解释存在差异,可能导致元素宽度和内边距计算上的问题。 **解决方案**: 明确...

    javascript层透明度

    - `filter: alpha(opacity=100)` 和 `opacity: 1`: 分别是IE和其他现代浏览器的CSS属性,用来设置初始的透明度为100%。 ##### 3. JavaScript函数 ```javascript function setOpacity(ID, VALUE) { E = document....

    css 透明度的设置兼容所有浏览器

    本文将详细解释如何设置CSS透明度以兼容所有主流浏览器。 首先,`opacity`属性是CSS3中的标准方法,用于设置元素的总体透明度。在给定的代码示例中,`.transparent_class`的`opacity: 0.5;`表示该类下的元素将具有...

    如何让css在所有浏览器下兼容

    - **透明度** - IE:使用`filter: progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=60);`。 - Firefox/Chrome:使用`opacity: 0.6;`。 - **阴影** - IE:不支持标准的`box-shadow`,但可以通过滤镜...

    拖拽兼容浏览器的容器js

    4. **透明度控制**:当拖放开始,库可能会有一个方法来改变容器的透明度,这可能涉及到CSS属性`opacity`的动态调整。 5. **事件回调**:提供给开发者注册的回调函数,如`onStart`、`onDrag`和`onEnd`,可以在拖放...

    css常用效果处理(兼容多浏览器)

    `opacity`属性可调整元素的透明度,但在旧版IE中需要通过`filter`实现。`rgba()`函数能创建带有透明度的颜色,但IE8及以下只支持`hex`或`rgb()`。可以使用`rgba-to-hex`工具转换颜色。 5. **过渡与动画**: `...

    CSS常见浏览器兼容问题

    - IE6对透明度的支持:使用`filter:alpha(opacity=xx)`,其中xx代表0到100的透明度。 - IE的盒模型问题:IE使用的是包含边距的盒模型,而其他浏览器遵循W3C标准。可以通过`box-sizing:border-box`或`*{box-sizing:...

Global site tag (gtag.js) - Google Analytics