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

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>

Answer 2

您可以使用伪元素来获取它 就像下面的

.about-section {
  height: 100%;
  padding-top: 50px;
  text-align: center;
  /*background: #eee;*/
  background: url(http://lorempixel.com/400/200/);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: relative;
}

.about-section::after {
  content: '';
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.5); /*Change as your need */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

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

您可以使用::before' - 伪元素。

.about-section {
  position:relative; /* Notice this */
  height: 100%;
  padding-top: 50px;
  text-align: center;
}

.about-section::before {
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  left:0px;
  top:0px;
  background: #000; /* change to whatever you want */
  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 4

目前，CSS不提供这种可能性（除非你的背景只是一种颜色，在这种情况下你可以使用rgba()）。

要实现这一目标，您可以将.about-section放入position: relative;并在其中创建<div>（最好是第一个孩子，甚至更好，::before绝对定位的伪元素，具有全宽和高度。然后，您可以根据需要调整其不透明度，而不会影响内容。