如何删除CSS中的父透明度？ [英] How do I remove parent opacity in CSS?

问题描述

在我的CSS我有以下：

In my CSS I have the following:

.Thing {
    filter: alpha(opacity=40);
    opacity:0.4;
    -moz-opacity:0.4;
}

.Thing button {
    filter: alpha(opacity=100);
    opacity:1;
    -moz-opacity:1.0;
}

但是，按钮仍然是.4不透明度。然后我尝试 opacity：2 这样，它看起来像我可以给它较少的不透明度，但不是更多。有没有办法我可以删除它，或者我必须写多个规则才能获得除按钮之外的一切？

However, the button is still .4 opacity. I then try opacity: 2 and such and it looks like I can give it less opacity but not more. Is there a way I can remove it or do I have to write multiple rules to get everything but the button?

我使用Firefox和Chrome测试。

I am testing with Firefox and Chrome.

推荐答案

使用 rgba 与 rgb fallback。

use rgba with a rgb fallback.

background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.5); /*ie6 will ignore this*/

rgba 将只对目标元素应用不透明度。

rgba will only apply opacity to the target element.

我最近一直在做的是使用 rgbapng sass / compass 插件，它生成一个png图像，用作浏览器的后备，无需rgba支持。

What i've recently been doing is using the rgbapng sass/compass plugin which generates a png image to use as a fallback for browsers without rgba support.

注意：您仍然需要使用ie6 png 修复让这个工作。

Note: you'll still need to use an ie6 png fix for this to work.

这篇关于如何删除CSS中的父透明度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！