Question

我对html opacity功能的工作感到困惑...假设有两个divs，一个在另一个内部，我将opacity应用于外部div，它将自动将不透明度应用于内部div。我们如何撤消这一点，就像不透明度应该仅适用于外部div？

我使用过css代码不透明度 http://jsfiddle.net/4uMdj/

Answer 1

如果您在外部DIV中使用background-color，则可以为其定义rgba值。写得像这样：

.outer{
 background-color: rgba(0,0,0,0.5);
}

＆安培;对于IE使用IE过滤器

您可以从此处http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

为IE生成rgba过滤器

Answer 2

.parent{
    position: relative;
}

.parent:before {
    z-index: -1;
    content: '';
    position: absolute;

    opacity: 0.3;
    width: xxpx;
    height: xxpx;
    background: ; 
}

.child{
    Color:xx;
}

Answer 3

如果您只是设置颜色，使用背景不透明度会更容易和更安全，这不会影响任何嵌套元素

.alpha
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
}

Answer 4

如果你使用css，你可以使用rgba，但你必须覆盖子元素的背景，否则它将从父div继承：jsfiddle example

示例中的css：

.opacity {
    background-color: rgba(0,150,0,0.2);
    padding: 20px;
    border: 1px solid #000;
}
.noopacity {
    border: 1px solid #000;
    background-color: #090; /*non alpha background*/
    padding: 20px;
}

跨浏览器有效的最简单方法是创建一个所需颜色的1px PNG文件并使用透明度并使用以下css：

.opacity {
    background: url("path/to/your/1px/transparent/background/image.png");
}

因为图像不会被用作继承背景;）

（注意：IE6默认情况下不支持PNG的透明度！）

Answer 5

如果您在其父元素上使用opacity，则无法撤消（增加）嵌套元素上的不透明度。

尝试使用background: rgba(r,g,b, opacity)：这不会在嵌套元素上应用不透明度

css的不透明度功能 - div内的透明度

5 个答案: