如何制作一个子div不应该从父div继承不透明度？

Question

大家好我创建了一个父div .ima,其中一个div调用.txt当我给出不透明度.ima然后不透明度.txt自动应用这是显而易见的.但我不希望它是这样的.

只.ima应在0​​.5不透明度和文本输入.txt应100%可见.

有没有办法做到这一点？

这是小提琴

我尝试将不透明度赋予1 .txt不起作用.我可能会以一种我不知道的错误方式这样做.任何帮助？

在这里我提到不同的问题,提到可能的重复

在那里他们已经建议使用rgba但是在这里我不想使用它因为如果我使用rgba那么这将变成黑色或我们将提到的其他颜色.

我想在这里使用背景图片.

这是我提出的样本.

像这样的事情是不可能的.

另外,我不想使用.png图像(半透明).图像可能会发生变化,这就是原因.

感谢那些在这里给出答案的人.

Answer 1

最简单的方法是假设你只想让.ima背景变得透明,在这种情况下你应该删除opacity并建立background-colour一个值为的值rgba(X%,X%,X%, .5),在这种情况下.txt你不会继承任何东西,你可以继续.

<div class="ima">
    <div class="txt">
        ...
    </div>
</div>

透明背景的CSS:

.ima {
    /* rgba is Red, Green, Blue, Alpha:
     * put in your colour as RGB then add opacity at the end */
    background-color: rgba(255, 0, 0, .5);
}

但是如果你想让一些.ima子节点继承透明度(例如文本和其他元素.txt),那么最简单的方法是创建一个与维度匹配的直接后代.ima并应用opacity规则:

<div class="ima">
    <div class="txt">
        ...
    </div>
    <div class="ima__transparency">
        ...
    </div>
</div>

CSS:

.ima {
    position: relative;
}

.ima__transparency {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: .5;
}

.txt {
    position: relative;
    z-index: 1;
}

背景图片示例.