Вывести текст в 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

Удалите opacity из div и добавьте before.Передайте background: rgba(0, 0, 0, 0.71); псевдоэлементу и z-index

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

<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>