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

Posted 2023-03-06

【中文标题】图像叠加层上的 CSS 不透明度 [重复]

【英文标题】：CSS Opacity atop Image Overlay [duplicate]

【发布时间】：2020-01-07 21:15:29

【问题描述】：

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

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

.intro .uk-overlay-primary 
    opacity: 0.5;

.intro .intro-title 
    opacity: 1;

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

【问题讨论】：

我相信这与这篇文章类似 - ***.com/questions/10422949/css-background-opacity

【参考方案1】：

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

.intro .uk-overlay-primary 

    background-image: linear-gradient(326deg, #80009F50 0%, #64309750 98%);

【参考方案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中提到的

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

【讨论】：

您好，非常感谢您抽出宝贵时间。我非常感谢这个解决方案以及提供的链接。非常好，非常感谢！