如何通过CSS设置避免视频背景区域文本继承opacity属性？

问题 #

网站头部视频背景上的白色文本可读性差，给home-section设置opacity:0.4后，文本也跟着变暗，调整文本的z-index无法解决该问题。

解决方案 #

方法1：给视频容器添加半透明遮罩（推荐） #

不要给整个section设置opacity，而是给视频容器添加深色半透明伪元素，仅让视频层变暗，上层文本不受影响：

修改CSS代码：

/* 移除home-section的opacity属性 */
.home-section {
  position: relative;
  background-color: #0000;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  z-index: 0;
  background-size: cover;
  /* 删除 opacity: .4; 这一行 */
}

/* 给视频播放器添加遮罩 */
.video-player {
  position: relative;
}

.video-player::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* 可调整 rgba 最后一位数值改变透明度 */
  z-index: 1;
}

/* 确保文本在遮罩上方 */
.titan-caption {
  position: relative;
  z-index: 2;
}

方法2：增强文本本身的可读性 #

如果不想修改视频层，可直接给文本添加阴影或描边，提升辨识度：

.titan-caption .font-alt {
  text-shadow: 0 2px 4px rgba(0,0,0,0.8); /* 黑色阴影强化文字与背景的对比 */
  /* 也可添加文字描边：-webkit-text-stroke: 1px #000; */
}

方法3：修改视频插件的opacity参数 #

直接调整视频播放器配置里的opacity，而非影响整个section：
修改HTML中的video-player属性：

<div
  class="video-player"
  data-property="{videoURL:'https://www.youtube.com/watch?v=VwWY-Zh-KLM', containment:'.home-section', startAt:30, mute:true, autoPlay:true, loop:true, opacity:0.4, showControls:true, showYTLogo:false}"
></div>

同时移除home-section中的opacity: .4;属性。

内容的提问来源于stack exchange，提问作者Chris Clark