图像叠加层上的 CSS 不透明度

帅哥

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

以下是codepen 的演示Codepen Demo

.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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

CSS不透明度影响兄弟图像的不透明度

来自分类Dev

在导航栏上设置CSS不透明度

来自分类Dev

指针事件+悬停CSS上的不透明度

来自分类Dev

带有文本的翻转图像上的 CSS 不透明度,但文本上的不透明度没有变化

来自分类Dev

多个CSS 3背景图像-在顶部图像中添加不透明度

来自分类Dev

如何使用CSS更改悬停时图像的不透明度

来自分类Dev

在CSS中为图像添加圆形褪色不透明度(渐晕效果)

来自分类Dev

使用鼠标指针下的JS或CSS更改图像不透明度?

来自分类Dev

图像悬停CSS的文本和不透明度更改

来自分类Dev

在CSS图像菜单中更改当前不透明度

来自分类Dev

如何使用CSS为div的背景图像设置不透明度或降低亮度

来自分类Dev

带旋转,重复和不透明度的CSS背景图像

来自分类Dev

如何使用CSS更改悬停时图像的不透明度

来自分类Dev

html和CSS图像的分层和不透明度

来自分类Dev

CSS淡化多个图像。延迟不透明度过渡。Webkit转换延迟

来自分类Dev

如何使用CSS设置背景图像的不透明度?

来自分类Dev

更改悬停时图像不透明度的列表-CSS

来自分类Dev

尝试使用 css 为背景图像添加不透明度

来自分类Dev

CSS3 不透明度属性到背景图像之一

来自分类Dev

css背景图像部分宽度不透明度

来自分类Dev

悬停在CSS上时使div更改不透明度,亮度

来自分类Dev

img上的不透明度的css关键帧动画不起作用

来自分类Dev

如何在不透明度为0.7的react组件上加载CSS微调器?

来自分类Dev

CSS悬停在div上时更改div的不透明度,亮度

来自分类Dev

CSS线性不透明度

来自分类Dev

CSS3:不透明度与过滤器不透明度?

来自分类Dev

CSS3:不透明度与过滤器不透明度?

来自分类Dev

css不透明度影响兄弟不透明度

来自分类Dev

将不透明度添加到图像的一部分(CSS)

Related 相关文章

  1. 1

    CSS不透明度影响兄弟图像的不透明度

  2. 2

    在导航栏上设置CSS不透明度

  3. 3

    指针事件+悬停CSS上的不透明度

  4. 4

    带有文本的翻转图像上的 CSS 不透明度,但文本上的不透明度没有变化

  5. 5

    多个CSS 3背景图像-在顶部图像中添加不透明度

  6. 6

    如何使用CSS更改悬停时图像的不透明度

  7. 7

    在CSS中为图像添加圆形褪色不透明度(渐晕效果)

  8. 8

    使用鼠标指针下的JS或CSS更改图像不透明度?

  9. 9

    图像悬停CSS的文本和不透明度更改

  10. 10

    在CSS图像菜单中更改当前不透明度

  11. 11

    如何使用CSS为div的背景图像设置不透明度或降低亮度

  12. 12

    带旋转,重复和不透明度的CSS背景图像

  13. 13

    如何使用CSS更改悬停时图像的不透明度

  14. 14

    html和CSS图像的分层和不透明度

  15. 15

    CSS淡化多个图像。延迟不透明度过渡。Webkit转换延迟

  16. 16

    如何使用CSS设置背景图像的不透明度?

  17. 17

    更改悬停时图像不透明度的列表-CSS

  18. 18

    尝试使用 css 为背景图像添加不透明度

  19. 19

    CSS3 不透明度属性到背景图像之一

  20. 20

    css背景图像部分宽度不透明度

  21. 21

    悬停在CSS上时使div更改不透明度,亮度

  22. 22

    img上的不透明度的css关键帧动画不起作用

  23. 23

    如何在不透明度为0.7的react组件上加载CSS微调器?

  24. 24

    CSS悬停在div上时更改div的不透明度,亮度

  25. 25

    CSS线性不透明度

  26. 26

    CSS3:不透明度与过滤器不透明度?

  27. 27

    CSS3:不透明度与过滤器不透明度?

  28. 28

    css不透明度影响兄弟不透明度

  29. 29

    将不透明度添加到图像的一部分(CSS)

热门标签

归档