Firefox3.5已不支持私有属性-moz-opacity了，在Mozilla 1.7 (Firefox 0.9)之前FF都是使用这个私有属性的，Firefox 0.9-Firefox3同时支持-moz-opacity和opacity这两个属性，Firefox升级到3.5之后，一些网站原来有的透明没有了，呵呵。
除了IE之外，目前主流浏览器， Opera 9.0及更高版本，Safari 1.2(WebKit 125) 及更高版本，chrome等等都支持opacity这个设置透明度的属性，opacity的属性值是0<number<1的数值，默认值是1。
例如50%透明的类：.example
CSS 透明度属性是网页设计中用于控制元素可见度的重要工具，它允许元素呈现出不同程度的透明，从而实现渐变效果或者让背景元素透过前景元素显示出来。本文将深入探讨CSS透明度属性及其在不同浏览器中的兼容性问题。
`opacity`属性是W3C标准中定义的用于设置元素整体透明度的属性。它的取值范围是0到1之间，其中0表示完全透明，1表示完全不透明。例如，要设置一个元素为50%的透明度，可以使用以下CSS代码：
```css
.example {
opacity: 0.5;
}
```
然而，对于早期版本的Firefox，尤其是Firefox 0.9到3.5之间，浏览器使用了私有属性`-moz-opacity`来实现透明效果。例如：
```css
.example {
-moz-opacity: 0.5;
}
```
需要注意的是，从Firefox 3.5版本开始，`-moz-opacity`不再被支持，开发者应使用`opacity`属性代替。对于不支持`opacity`的浏览器，如Internet Explorer（IE），我们需要使用`filter`属性来实现类似的效果。在IE4到IE8中，我们可以这样设置：
```css
.example {
filter: alpha(opacity=80);
/* IE 8 */
-ms-filter: "alpha(opacity=80)";
}
```
这里`alpha(opacity=80)`中的`80`代表0到100之间的百分比透明度。IE8引入了`-ms-filter`，提供对CSS3 `opacity`的替代支持。
此外，IE还支持`progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)`，但这一写法并不推荐使用，因为它属于旧式的滤镜方式，且只适用于IE。为确保跨浏览器兼容性，可以采用以下CSS代码：
```css
.example {
opacity: 0.8;
/* Firefox, Safari, Opera */
-ms-filter: "alpha(opacity=80)"; /* IE 8 */
filter: alpha(opacity=80);
zoom: 1; /* 触发IE7及更低版本的"hasLayout" */
}
```
对于JavaScript动态改变元素的透明度，可以使用`style.opacity`或`style.filter`，如下所示：
```javascript
var el = document.getElementById("mybox");
el.style.opacity = 0.5; // 对于大部分现代浏览器
el.style.filter = 'Alpha(Opacity=50)'; // 对于IE
```
值得注意的是，虽然Firefox 3.5废弃了CSS中的`-moz-opacity`，但在JavaScript中，`element.style.MozOpacity`仍然可用。尽管如此，出于兼容性和未来的考虑，推荐使用标准的`opacity`属性。
CSS的透明度属性使得网页设计者能够轻松地调整元素的透明度，创建出丰富的视觉效果。不过，由于浏览器之间的兼容性差异，开发者需要对各种不同的语法和特性有所了解，以便编写出能在多种浏览器中正常工作的代码。
- 1
- 2
前往页