当父元素具有不透明度时，禁用子元素的不透明度

Question

我有一个不透明度为 0.8 的 容器。在背景中，我有一张通过内容 div 闪耀的图像。 现在，我在这个容器中有一张我客户的照片。问题是，它使用父元素的不透明度，因为此图像的不透明度只是相对于容器而不是相对于主体。

我有这个代码：

<div id="contentContainer" style="background: #FFFFFF; opacity: 0.8">
    Content ...
    <img src="..." style="opacity: 1.0" alt="Photo" />
</div>

这不起作用，如下所述。

有人有想法吗？

Answer 1

通过将其更改为以下内容解决了此问题：

<div id="contentContainer" style="background: rgba(255,255,255,0.8);">
    Content ...
    <img src="..." alt="Photo" />
</div>

仅使用 rgba alpha 而不是不透明度。 现在可以了。

Answer 2

正如其他答案所述，使用不透明度是不可能的，也就是说，使用这种方法。

解决方法/破解方法是将position: relative; z-index:2; 添加到父元素contentContainer。然后添加另一个具有不透明度和其他内容的元素。如果您将图像作为背景，这将特别有用

所以你的标记应该看起来像这样：

HTML

<div id="contentContainer">
    Content ...
    <img src="..." alt="Photo" />
    <span id="contentBackground"></span>
</div>

CSS

#contentContainer { position: relative; z-index 2; }
#contentBackground {
    position: absolute;
    display: block;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: /* stuff */;
}

注意z-index 属性。这些对于确保背景元素位于父元素下方并且不与防止点击事件的内容重叠非常重要。

此方法也可用于您需要为其添加 content: ''; 的伪元素（:before 或 :after。

Answer 3

这可能有助于其他想要使用不透明度、防止某个子元素变得不透明的人。

您可以使用:not() 选择器。 拿这个样本。

<style type="text/css">
    .redbg{
        background-color:red;
    }
    .sample1 :not(.NonOpaque){
        opacity:0.5;
    }
    .sample2:not(.NonOpaque){
        opacity:0.5;
    }
</style>

<div style="background-color:rgb(63,72,204); padding:15px; margin:15px;">
    <div class="redbg sample1">
        <div>
            SAMPLE 1.
        </div>
        <div class="NonOpaque">
            I am not Opaque.
            Blah! Blah! Blah!
        </div>
        <div>
            I am Opaque.
            Blah! Blah! Blah!
        </div>
        <div>
            I am Opaque.
            Blah! Blah! Blah!
        </div>
    </div>
</div>

<div style="background-color:rgb(63,72,204); padding:15px; margin:15px;">
    <div>SAMPLE 2.</div>
    <div class="redbg sample2 NonOpaque">
        <div style="padding:5px; margin:3px;">
            I am not Opaque.
            Blah! Blah! Blah!
        </div>
    </div>
    <div class="redbg sample2">
        <div style="padding:5px; margin:3px;">
            We are all Opaque.
        </div>
    </div>
</div>

输出：