如何在使文本 100% 可见的同时降低背景图像的不透明度？ [复制]

Question

标题的background img应该是半透明的，文字应该是完全可见的。

我在这个网站和其他网站上尝试了多种修复方法，包括使用:before

HTML：

 <div class="banner">
        <div class="bannerimage">
          <div class="bannertext">
        <h1>Welcome to my Portfolio</h1>
        <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>
        <a href="#">A link <span><i class="fas fa-caret-right"></i></span></a>
      </div>
    </div>
  </div>

CSS：

.banner {
  width: 100%;
}

.bannerimage {
  background-image: url("img/banner.jpg");
  position: relative;
  height: 500px;

}

.bannerimage:before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  opacity: 0.4;
}

.bannertext {
  color: 111;
  position: relative;
  text-align: right;
}

背景应该是translucent 前景文本应该是solid。

Answer 1

如果您为父级 .banner-image 赋予不透明度，它将影响其子级。所以更新你的代码：

.banner {
      width: 100%;
      position: relative;
    }

    .bannerimage {
        background-image: url(https://via.placeholder.com/1000x700);
        position: relative;
        height: 500px;
        opacity: 0.5;
        background-size: cover;

    }
    .bannertext {
      color: #111;
      text-align: right;
      position: absolute;
      top: 0;
      width: 100%;
    }

      <div class="banner">
        <div class="bannerimage">
              
        </div>
        <div class="bannertext">
                <h1>Welcome to my Portfolio</h1>
                <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>
                <a href="#">A link <span><i class="fas fa-caret-right"></i></span></a>
              </div>
      </div>

Answer 2

您可以使用此代码

       body {
            margin: 0;
            padding: 0;
        }   
        .banner {
          width: 100%;
        }
        .bannerimage {
            width: 100%;
            height: 500px;
            display: block;
            position: relative;
            background: rgba(0,0,0,0.7);
        }
        .bannerimage::after {
            content: "";
            background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/codepen.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            position: relative;
            opacity: 0.4;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            position: absolute;
            z-index: -1;   
        }
        .bannertext {
          color: 111;
          position: relative;
          text-align: right;
        }
        .bannertext h1 {
          margin-top: 0px;
          color: #fff;
        }
        .bannertext h2 {
          color: #fff;
        }
        .bannertext a {
          color: #fff;
        }

    <div class="banner">
        <div class="bannerimage">
            <div class="bannertext">
                <h1>Welcome to my Portfolio</h1>
                <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>
                <a href="#">A link <span><i class="fas fa-caret-right"></i></span></a>
            </div>
        </div>
    </div>