CSS透明盒子设置opacity后文字褪色，如何分离文字与透明度设置

问题根因 #

CSS的opacity属性会作用于当前元素以及其所有后代子元素，且该效果无法被子元素覆盖，这就是你设置盒子透明度后内部文字同步变淡的核心原因。

解决方案1：使用RGBA背景色（最简易，优先推荐） #

仅给背景添加透明度，不影响内部内容，只需修改.content的背景属性，删除单独的opacity设置即可，修改后完整代码如下：

CSS代码：

body {
  background-color: gray;
}

.container {
  position: relative;
  text-align: center;
}

.content {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  /* rgba最后一个参数为透明度，取值0-1，替代原有单独的opacity设置 */
  background-color: rgba(255, 255, 255, 0.3);
  width: 70%;
  margin: auto;
  padding: 5px;
  color: black;
  font-size: 30px;
  font-family: calibri;
  text-align: center;
}

HTML代码无需修改即可生效。

解决方案2：伪元素独立背景层（适配背景为渐变、图片等复杂场景） #

如果你的盒子背景不止纯色，还需要叠加其他效果，可以用伪元素单独承载背景和透明度，和内容层物理隔离，代码如下：

CSS代码：

body {
  background-color: gray;
}

.container {
  position: relative;
  text-align: center;
}

.content {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  width: 70%;
  margin: auto;
  padding: 5px;
  color: black;
  font-size: 30px;
  font-family: calibri;
  text-align: center;
  /* 新增以下两行，用于层级控制 */
  position: relative;
  z-index: 1;
}

/* 伪元素作为独立背景层 */
.content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0.3;
  z-index: -1;
}

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