51

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

我有这个代码：

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

这不起作用，如下所述。

有人有想法吗？

4

6 回答 6

68

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

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

仅使用 rgba alpha 而不是不透明度。现在它起作用了。

于 2013-10-18T19:14:03.010 回答
9

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

一种解决方法/破解方法是添加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或） 。:aftercontent: '';

于 2013-10-18T19:19:08.900 回答
9

这可能会帮助其他想要使用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>

输出：

在此处输入图像描述

于 2017-01-22T09:33:27.243 回答
4

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

0.8时间1.0仍然是0.8，并且不透明度不可能高于 1 的值 - 所以您唯一可以尝试做的就是将您的图像从具有不透明度的容器中取出，并尝试使其看起来好像在里面（通过以某种方式将其放置在其上）。

于 2013-10-18T19:01:04.673 回答
3

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

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

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

于 2013-10-18T19:00:44.903 回答
1

使用背景：rgba(red,green,blue,alpha) 可能是一个很好的解决方案，但是，当您使用 disabled 属性时，您可能会发现它在 iPhone 中不再起作用。

于 2015-04-02T11:45:09.250 回答