用来设定元素透明度的 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
分享到:
相关推荐
这就导致了在不同浏览器间实现透明度兼容性的问题。 在Internet Explorer(IE)中,为了实现类似的效果,你需要使用其特有的滤镜(filter)属性,具体形式为`filter: alpha(opacity=value)`,其中`value`是0到100...
### 多个浏览器透明度设置 #### 知识点概述 在网页设计中,透明度设置是一项常用的技术,它能够使元素呈现出半透明的效果,从而达到美化页面、增强视觉层次感的目的。不同的浏览器可能采用不同的渲染引擎和技术...
本文将深入探讨CSS透明度的概念、不同浏览器下的兼容性问题以及如何通过多种方式来设置透明度。 #### CSS透明度基础概念 透明度是指一个对象或图像能够透过其自身显示背景的程度。在CSS中,可以通过`opacity`属性...
- **背景透明度设置**:对于 IE 浏览器,可以使用 `filter` 属性来设置背景的透明度。 ```css /* IE 中的背景透明度设置 */ div { filter: progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=60); } ``` ...
3. 考虑浏览器兼容性,对于旧版IE(尤其是IE8及更低版本),需要额外的滤镜代码来实现透明度效果。 了解这些基本知识后,你就能更好地掌握如何在CSS中应用透明度,以创建更丰富的视觉效果。在实际开发中,根据项目...
4. IE滤镜(Filters):对于透明度、渐变、阴影等效果,IE8及以下版本支持使用滤镜,如`filter: alpha(opacity=50);`实现透明度。对于其他浏览器,可以使用`opacity: 0.5;`。 二、JavaScript兼容性问题及解决方案 ...
CSS 多浏览器兼容性是Web开发中的重要环节,因为不同的浏览器对CSS的解析方式可能存在差异,这可能导致在不同浏览器中页面展示效果不一致。以下是一些关键知识点和解决方案: 1. **DOCTYPE影响CSS处理**: DOCTYPE...
2. **其他浏览器兼容**:对于其他支持PNG透明度的现代浏览器,可以使用CSS3的`background-image`和`opacity`属性。然而,要确保这些属性在所有浏览器中都有效,可能需要使用`-webkit-`, `-moz-`, `-ms-`, `-o-`等...
对于不透明度的设置,IE使用`filter`属性,而Firefox和其他现代浏览器则使用`opacity`属性。开发者应同时提供两种写法,以确保所有浏览器都能正确渲染。 #### 9. 边框圆角支持 IE对于CSS3的`border-radius`支持较...
CSS的`opacity`属性允许我们为元素设置一个透明度级别,从而创建出半透明的效果。这个特性在现代网页设计中非常常见,用于创建各种交互式和视觉效果,如按钮、背景图像以及悬浮框等。 `opacity`属性的值范围是从0到...
**解决方案**: 使用 `opacity` 属性,以确保跨浏览器的兼容性。 ##### 4. css中的width和padding - **IE和其他浏览器**: 对于盒模型的解释存在差异,可能导致元素宽度和内边距计算上的问题。 **解决方案**: 明确...
- `filter: alpha(opacity=100)` 和 `opacity: 1`: 分别是IE和其他现代浏览器的CSS属性,用来设置初始的透明度为100%。 ##### 3. JavaScript函数 ```javascript function setOpacity(ID, VALUE) { E = document....
本文将详细解释如何设置CSS透明度以兼容所有主流浏览器。 首先,`opacity`属性是CSS3中的标准方法,用于设置元素的总体透明度。在给定的代码示例中,`.transparent_class`的`opacity: 0.5;`表示该类下的元素将具有...
- **透明度** - IE:使用`filter: progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=60);`。 - Firefox/Chrome:使用`opacity: 0.6;`。 - **阴影** - IE:不支持标准的`box-shadow`,但可以通过滤镜...
4. **透明度控制**:当拖放开始,库可能会有一个方法来改变容器的透明度,这可能涉及到CSS属性`opacity`的动态调整。 5. **事件回调**:提供给开发者注册的回调函数,如`onStart`、`onDrag`和`onEnd`,可以在拖放...
`opacity`属性可调整元素的透明度,但在旧版IE中需要通过`filter`实现。`rgba()`函数能创建带有透明度的颜色,但IE8及以下只支持`hex`或`rgb()`。可以使用`rgba-to-hex`工具转换颜色。 5. **过渡与动画**: `...
- IE6对透明度的支持:使用`filter:alpha(opacity=xx)`,其中xx代表0到100的透明度。 - IE的盒模型问题:IE使用的是包含边距的盒模型,而其他浏览器遵循W3C标准。可以通过`box-sizing:border-box`或`*{box-sizing:...