无法在 reactjs 中更改视频的不透明度

Question

我想在我的react视频中添加一些绿色不透明度，但未能做到。我尝试将background-color: rgba(0, 255, 0, 0.3)添加到每个div中，但没有任何帮助。

使用最新版本的Chrome。

有人能帮我吗？

这是我的代码：

<div className="intro__video fadeIn">
<video className="intro__video__content" autoPlay muted loop>
<source src={bgVideo} type="video/mp4" />
<source src="img/video.webm" type="video/webm" />
Your browser is not supported!
</video>
</div>

和我的css：

intro__video {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
opacity: .15;
overflow: hidden;
&__content {
height: 100%;
width: 100%;
object-fit: cover;
// opacity: .85;
background-color: rgba(0, 255, 0, 0.3);
}
}
}

对于注释掉的CCD_ 2，它起作用。但background没有。为什么？

Answer 1

不透明度描述了整个元素的不透明程度：包括其子元素和内容。

背景颜色描述元素背景中的颜色。子体和内容在其顶部上呈现。

如果要使用背景色对元素进行着色，则必须将背景色设置在要着色的内容前面的上。

您可能需要查看SVG过滤器。