图像叠加层上的 CSS 不透明度 [重复]

Question

我正在寻求帮助以纠正课程的不透明度。请原谅我没有展示我尝试过的许多方法的工作。

以下是关于 codepen 的演示： Codepen Demo

.intro .uk-overlay-primary {
    opacity: 0.5;
}
.intro .intro-title {
    opacity: 1;
}

“intro-title”类继承了“ul-overlay”类的不透明度。我该如何解决这个问题，在覆盖类的顶部强制“intro-title”不透明度为 1？

Answer 1

答案很简单。您需要使用背景不透明度而不是样式opacity。更改以下css，它应该可以正常工作:)

.intro .uk-overlay-primary 
{
    background-image: linear-gradient(326deg, #80009F50 0%, #64309750 98%);
}

Answer 2

正如我所评论的，这在某种程度上类似于this post。对于解决方案，您可以尝试this。如果您觉得可以，我更改了结构并制作了覆盖position: absolute

.intro .uk-overlay-primary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(326deg, #80009F 0%, #643097 98%);
    opacity: 0.5;
}

还有其他方法可以获得此结果，但我选择使用这种方法对您的代码进行细微更改。

为了更好的理解，如MDN web docs中提到的

不透明度适用于整个元素，包括其内容， 即使该值不被子元素继承。就这样 元素及其子元素相对于 元素的背景，即使它们相对具有不同的不透明度 彼此。