html - 如何在不改变背景内容的情况下改变背景的不透明度？

Question

我不知道如何使 background-image 不透明度为 0.5 并且内容完全不透明。

.about-section {
  height: 100%;
  padding-top: 50px;
  text-align: center;
  /*background: #eee;*/
  background: url(../images/about.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.3;
}

<section id="about" class="about-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h1 class="head">About Us</h1>

      </div>
    </div>
  </div>
</section>

Answer 1

这是您追求的那种东西吗？

  .about-section {
    height: 100%;
    padding-top: 50px;
    text-align: center;
  }
  
  .background {
    height: 100%;
    width: 100%;
    position: absolute;
    background: url(https://ichef-1.bbci.co.uk/news/976/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.3;
    
  }

<section id="about" class="about-section">
  <div class="background">
  </div>
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h1 class="head">About Us</h1>
      </div>
    </div>
  </div>
</section>