我正在寻求帮助纠正课堂上的不透明度。请原谅我没有展示我尝试过的许多方法的工作。
.intro .uk-overlay-primary {
opacity: 0.5;
}
.intro .intro-title {
opacity: 1;
}
'intro-title' 类继承了 'ul-overlay' 类的不透明度。我该如何解决这个问题,强制覆盖类顶部的“介绍标题”不透明度为 1?
正如我所评论的,这在某种程度上类似于这篇文章。对于解决方案,你可以试试这个。如果你觉得没问题,我改变了结构并制作了叠加层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 网络文档中所述
不透明度适用于整个元素,包括其内容,即使该值不是由子元素继承的。因此,元素及其子元素相对于元素的背景都具有相同的不透明度,即使它们相对于彼此具有不同的不透明度。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句