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

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

我有以下代码：

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

内容。。。

这不起作用，如下所述

---

有人有想法吗？

不透明度适用于元素和元素中的任何子元素/内容

对于部分透明的巨像，请使用RGBA bg颜色

---

对于部分透明的背景图像，需要一个JS/JQ解决方案。

这是不可能的-不透明度适用于元素及其所有内容，您不能“反转”它

---

0.8

倍

1.0

仍然是

0.8

，不透明度不可能大于1–因此，您可以尝试的唯一方法是将图像从具有不透明度的容器中取出，并尝试使其看起来好像在内部（以某种方式将其放置在容器上方）.

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

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

内容。。。

仅使用rgba alpha而不是不透明度。

---

现在它可以工作了。

作为其他答案状态，不可能使用不透明度，也就是说，使用此方法

一种解决方法/破解方法是添加

位置：relative；z指数：2到父元素
contentContainer
。然后添加另一个具有不透明度和其他内容的元素。如果以图像作为背景，这一点尤其有用

因此，您的标记应该有点像这样：

HTML

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

请注意
z-index
属性。这些对于确保后台元素位于父元素之下并且不与阻止单击事件的内容重叠非常重要

此方法也可用于伪元素（
：before
或
：after
），您需要为其添加
内容：“”
使用背景：rgba（红色、绿色、蓝色、alpha）可能是一个很好的解决方案，但是，当您使用禁用属性时，您可能会发现它在iPhone中不再起作用
 这可能有助于希望使用不透明度的其他人，防止某个子元素变得不透明

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


.redbg{
背景色：红色；
}
.sample1:非（.non不透明）{
不透明度：0.5；
}
.sample2:非（.non不透明）{
不透明度：0.5；
}
样本1。
我不是不透明的。
废话！废话！废话！
我是不透明的。
废话！废话！废话！
我是不透明的。
废话！废话！废话！
样本2。
我不是不透明的。
废话！废话！废话！
我们都是不透明的。

输出：

这是您的？？你需要什么？？可能对您有帮助，也可能没有帮助；-）<代码>背景：rgba（0,0,0,0.5）将是您的最佳选择。rgba细分：0，0，0，=>颜色红色，绿色，蓝色值。a 0.5=>这是颜色alpha或不透明度。感谢rgba提示-只需将rgb值更改为白色，并用我的不透明度替换alpha。看到我编辑的问题好同事，一件事要考虑，如果你关心，是为IE 8和低于用户。不支持rgba和不透明度。我不明白为什么这个解决方案没有更多的投票权。
：not（）。这个解决方案对我有效。这不能回答问题。@Gilbert:这不能回答问题。这个问题涉及到子-父关系，尤其是当父对象设置了该属性时，子对象无法表达其计算样式不透明度。这个答案甚至不承认问题，更不用说解决问题了。应该让选票下降，而不是上升。尝试设置最外层（蓝色）的“不透明度”，然后您将看到问题。此外，作者似乎颠倒了“不透明”一词的含义也无济于事；好像它的意思是“透明”
<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>