React中无法为视频添加绿色半透明效果的问题求助

嘿，我来帮你理清这个问题的原因，以及怎么解决它～

为什么background-color没效果？ #

你给<video>元素设置的background-color只有在视频内容不可见的时候才会显示——比如视频还在加载中、浏览器不支持该视频格式，或者视频被隐藏了。当视频正常播放时，视频的画面会完全覆盖掉这个背景色，所以你看不到预期的绿色半透明效果。而opacity是直接作用于整个<video>元素（包括它的内容），所以调整这个属性能看到变化。

正确的实现方法：用叠加层实现半透明效果 #

要给视频添加绿色半透明滤镜，最靠谱的方式是在视频上方叠加一个独立的层（比如用伪元素或者额外的<div>），让这个层显示绿色半透明效果，同时不影响视频的播放。

这里推荐用父容器的伪元素来实现，代码修改如下：

修改后的CSS： #

.intro__video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  opacity: .15;
  overflow: hidden;
  /* 新增：让伪元素基于父容器定位 */
  position: relative;
}

/* 新增伪元素作为绿色半透明叠加层 */
.intro__video::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 255, 0, 0.3);
  /* 确保叠加层在视频上方 */
  z-index: 1;
}

.intro__video__content {
  height: 100%;
  width: 100%;
  object-fit: cover;
  /* 让视频处于叠加层下方 */
  position: relative;
  z-index: 0;
}

原理说明： #

1. 给父容器.intro__video设置position: relative，让伪元素可以基于它定位。
2. 伪元素::after会生成一个和父容器一样大小的层，设置好绿色半透明背景后，通过z-index确保它在视频的上方。
3. 给视频设置z-index: 0，保证它在叠加层下方，这样叠加层的颜色就能覆盖在视频画面上，达到你想要的效果。

这样修改后，你就能看到视频上方的绿色半透明效果啦～

内容的提问来源于stack exchange，提问作者Dariusz Legizynski