在div中添加叠加到前面的文本，这样不透明度不会影响文本颜色？

Question

我为措辞不好而道歉，所以我已经加入了我正在研究的计时器。有可能破解这个，所以文本仍然在叠加层之上，而不是它的暗淡吗？一定要全屏打开，否则白色会混合。

如果不是，我可以考虑重新嵌套，但不确定如果没有覆盖文本覆盖文本，我将如何实现相同的结果。我已经看了几个类似的例子，但是无法准确地隔离他们如何能够保持白色文本不受不透明度的影响，同时允许元素保留在Div中。

#countdown-overlay {
  background: url('https://www.toptal.com/designers/subtlepatterns/patterns/spiration-dark.png');
  opacity: .8;
  height: 100%;
  width: 100%;
}

#countdown {
  position: absolute;
  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+ */
}

.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;
}

<section id="countdown">
  <div id="countdown-overlay">
    <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>

Answer 1

从div中删除opacity并添加before。 将background: rgba(0, 0, 0, 0.71);提供给伪元素和z-index

＆＃13;

＆＃13;

#countdown-overlay {
  background: url('https://www.toptal.com/designers/subtlepatterns/patterns/spiration-dark.png');
 /* opacity: .8;*/
  height: 100%;
  width: 100%;
  position:relative;
}
/**Add before */
#countdown-overlay:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(169, 161, 186, 0.38);
    width: 100%;
    height: 100%;
}

#countdown {
  position: absolute;
  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+ */
}

.counter-title {
  margin: 0;
  padding: 2em;
  font-size: 200%;
  font-weight: 250;
  text-align: center;
  position:relative;
}

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

.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;
}

＆＃13;

<section id="countdown">
  <div id="countdown-overlay">
    <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>

＆＃13;

＆＃13;

＆＃13;