如何使子div不应继承父div的不透明度？

Question

嗨，我创建了一个父div .ima，其中一个div名为.txt，当我给.ima一个不透明度时，不透明度就会自动应用到.txt，这是很明显的。但我不想这样。

只有.ima在0.5的不透明度中，.txt中的文本应该是100%可见的。

有办法这样做吗？

这是小提琴

我试着给.txt中的1提供不透明度，它不起作用。我可能是以错误的方式做这件事--我没有know.Any的帮助？

这里我提到的问题与引用可能重复的的问题不同

在这里，他们提出了使用rgba的建议，但是这里我不想使用它，因为如果我使用rgba，这将变成黑色或其他颜色，我们会提到。

我想在这里使用背景图像。

这是一个提议的样本。

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

此外，我也不想使用.png图像(半透明)。图像可能会发生变化，这就是原因所在。

不管怎么说，谢谢那些在这里给出答案的人。

Answer 1

最简单的方法是假设您只希望.ima的背景是透明的，在这种情况下，您应该删除opacity并建立一个值为rgba(X%,X%,X%, .5)的background-colour，在这种情况下，.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;
}

带背景图像的示例。

Answer 2

您不能继承不透明，您的选项如下：

• 调整标记，使.txt不是.ima的子级，然后使用绝对定位
• 不要使用不透明度，使.txt覆盖与.ima相同的区域，并给.txt一个半透明的背景。
• 如果目标受众支持梯度和多重背景，您可以在图像上设置模糊渐变层。： 背景:线性梯度( rgba(255,255,255,0.5)，rgba(255,255,255,0.5))，url('1366x768.jpg‘)；

使用这种方法，您实际上只需要div，如果它只是您想要显示的文本和图像。

Answer 3

使用photoshop创建一个具有60%透明度的png映像(1 1px/1px)，并调用您的父div，即

.ima{
  background:url(imagename.png) repeat 0 0;
}