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

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而不是opacity.现在它有效.

Answer 2

这可能会帮助其他想要使用opacity 的人，防止某个子元素变得不透明。

您可以使用: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>

输出：

Answer 3

正如其他答案所述,使用不透明度是不可能的,即使用此方法.

解决方法/黑客将添加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财产.这些对于确保背景元素位于父元素下方并且不与防止单击事件的内容重叠非常重要.

此方法也可以与您需要添加的伪元素(:before或:after)一起使用content: '';.