How do I lower the background-image opacity while leaving the text 100% visible?

Question

The background img of the header should be translucent and the text should be fully visible.

I've tried a multitude of fixes on this site and others including using :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;
}

Background should be translucent foreground text should be solid.

Answer 1

You can use this code

       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>