为 CSS 类添加不透明度答案

【问题标题】：add opacity to a css class为 CSS 类添加不透明度
【发布时间】：2011-09-16 05:05:00
【问题描述】：

有没有办法在 css 类中设置不透明度，在 jquery 中你可以这样做：

$(result).parent().css({ 'background-color': '#eeeeee', 'opacity': '0.7' })

有什么办法吗？
我需要将这些放到 css 类中的属性中。

【问题讨论】：

标签： jquery css opacity background-color

【解决方案1】：

当前需要不同的CSS 属性来实现跨浏览器兼容性。

filter:alpha(opacity=50); // For IE
-moz-opacity:0.5;         // Older versions of Mozilla
-khtml-opacity: 0.5;      // For Safari 1.x (I believe)
opacity: 0.5;             // General usage

我个人会坚持使用jQuery 为您执行此操作，因为他们已经在考虑多种浏览器的情况下开发了他们的方法。

【讨论】：

谢谢，如果我想使用 jquery，我需要知道如何在这些属性之后变红并坚持原来的。我该怎么做？
我不确定我明白你在问什么。
添加这些新属性后，我有了一些功能......之后我需要删除我添加的属性。
将上述建议作为一个类添加到您的样式表中，然后在您想要添加它时使用.addClass()，并且（是的，您猜对了......）当您想要删除它时使用removeClass() .
在这种情况下，我只需更改 HTML 元素上的类。如果您当前的 html 是
stuff
，那么使用 jQuery 删除此类将删除样式。

【解决方案2】：

要在所有主流浏览器中设置不透明度，请执行以下操作

HTML：

<div class="opacityElement"></div>

CSS：

.opacityElement {
    filter:alpha(opacity=50);  // IE
    -moz-opacity:0.5;          // Firefox
    -khtml-opacity: 0.5;       
    opacity: 0.5;         
}

【讨论】：

【解决方案3】：

没有 CSS 类这样的东西（HTML 有类，CSS 有类选择器）。听起来您的意思是 CSS 规则集。

some selector {
    opacity: 0.7;
}

【讨论】：

这不是和上面的答案相矛盾吗？

【解决方案4】：

是的，和你用 jQuery 做的完全一样：

.className { opacity: 0.7 }

但请注意，这在 Internet Explorer 中不起作用，因此您需要添加另一个属性，filter: alpha(opacity=70)

【讨论】：

谢谢，但它告诉我它不是已知的 css 属性。
这告诉你什么？ CSS3 规范告诉我不同：w3.org/TR/css3-color/#transparency

【解决方案5】：

像这样：

.myClass{
  opacity:0.4;
  filter:alpha(opacity=40);
}

filter:alpha(opacity=40); 用于 IE

【讨论】：