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

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

解决方法/黑客将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: '';）一起使用。

Answer 3

这是不可能的 - 不透明度是一个元素，所有它的内容，你不能“反转”它。

0.8次1.0仍然是0.8，并且不可能为不透明度设置高于1的值 - 所以您可以尝试做的唯一事情就是将您的图像从具有不透明度的容器，并尝试使其看起来就像它在里面一样（通过以某种方式将其定位在它上面）。

Answer 4

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

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

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

对于部分透明的colos，使用RGBA bg颜色。

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

Answer 6

使用背景：rgba（红色，绿色，蓝色，alpha）可能是一个很好的解决方案，但是，当您使用disabled属性时，您可能会发现它在iPhone中不再起作用。

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

6 个答案: