如何让Div中叠加层上的文字不受Opacity影响保持正常显示？

问题的核心原因很明确：你把文字放在了设置了opacity: .8的#countdown-overlay容器里，而opacity属性会作用于元素及其所有子元素，所以白色文字自然会跟着叠加层一起变暗。

下面给你两种无需大幅调整结构的解决方案，都能让文字保持纯白，不受叠加层透明度影响：

方案一：用伪元素实现叠加层（无需修改HTML） #

这种方法不需要改动现有HTML结构，只需要调整CSS，把叠加层改为父元素#countdown的伪元素，让文字内容层级高于伪元素即可：

#countdown {
  position: relative; /* 让伪元素相对于该容器定位 */
  color: #fff;
  height: 50vh;
  width: 100%;
  background: #673AB7; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #512DA8, #673AB7); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #512DA8, #673AB7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/* 将原叠加层样式移到父元素的伪元素上 */
#countdown::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url('https://www.toptal.com/designers/subtlepatterns/patterns/spiration-dark.png');
  opacity: .8;
  z-index: 1; /* 叠加层在渐变背景之上，但在文字之下 */
}

#countdown-overlay {
  position: relative;
  z-index: 2; /* 让文字内容层级高于叠加层 */
  height: 100%;
  width: 100%;
}

/* 保留你原有的其他样式 */
.counter-title {
  margin: 0;
  padding: 2em;
  font-size: 200%;
  font-weight: 250;
  text-align: center;
}

#timer {
  text-align: center;
  display: flex;
  justify-content: center;
}

.clock-border {
  display: table;
  border: 2.5px solid;
  border-radius: 100px;
  border-color: #fff;
  padding: 0px;
  width: 150px;
  height: 150px;
  line-height: 0px;
  margin-left: 3em;
}

.value {
  font-size: 200%;
  display: table-cell;
  vertical-align: middle;
}

HTML结构完全不用改，伪元素会作为独立的叠加层存在，文字内容因为z-index更高，不会被叠加层的透明度影响。

方案二：分离叠加层与文字内容（微小调整HTML） #

如果更倾向于直观的结构分离，可以把文字内容从叠加层容器中移出，让两者都作为#countdown的直接子元素：

修改后的HTML #

<section id="countdown">
  <div id="countdown-overlay"></div> <!-- 纯叠加层容器 -->
  <div class="countdown-content"> <!-- 独立的文字内容容器 -->
    <h1 class="counter-title"> Next stream in</h1>
    <div id="timer">
      <div class="clock-border">
        <p class="value">4 Days</p>
      </div>
      <div class="clock-border">
        <p class="value">7 Hours</p>
      </div>
      <div class="clock-border">
        <p class="value">3 Min</p>
      </div>
      <div class="clock-border">
        <p class="value">24 Sec</p>
      </div>
    </div>
  </div>
</section>

修改后的CSS #

#countdown {
  position: relative;
  color: #fff;
  height: 50vh;
  width: 100%;
  background: #673AB7; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #512DA8, #673AB7); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #512DA8, #673AB7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#countdown-overlay {
  position: absolute;
  top: 0;
  left: 0;
  background: url('https://www.toptal.com/designers/subtlepatterns/patterns/spiration-dark.png');
  opacity: .8;
  height: 100%;
  width: 100%;
  z-index: 1; /* 叠加层在底层 */
}

.countdown-content {
  position: relative;
  z-index: 2; /* 文字内容在叠加层之上 */
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 保持内容垂直居中，和原有效果一致 */
}

/* 保留你原有的其他样式 */
.counter-title {
  margin: 0;
  padding: 2em;
  font-size: 200%;
  font-weight: 250;
  text-align: center;
}

#timer {
  text-align: center;
  display: flex;
  justify-content: center;
}

.clock-border {
  display: table;
  border: 2.5px solid;
  border-radius: 100px;
  border-color: #fff;
  padding: 0px;
  width: 150px;
  height: 150px;
  line-height: 0px;
  margin-left: 3em;
}

.value {
  font-size: 200%;
  display: table-cell;
  vertical-align: middle;
}

这两种方案都能完美解决你的问题，让白色文字保持原本的亮度，同时叠加层的透明效果依然存在。你可以根据自己的代码习惯选择其中一种~

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