CSS darker layer on background

/* Splash*/
.splash::before {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  content: "";
  display: block;
}
.splash {
  background-image: url("https://images.pexels.com/photos/908298/pexels-photo-908298.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  color: $color-five;
  min-height: 500px;
  display: flex;
  position: relative;
}
.splash-inner {
  margin: auto;
  max-width: 70%;
  text-align: center;
  z-index: 1;
}

HTML darker layer on background-image

<header class="splash">
        <div class="splash-inner">
            <h1 class="page-title">Welcome To Our Studio!</h1>
            <h2 class="page-subtitle">T'S NICE TO MEET YOU</h2>
            <a href="#" class="btn btn-one">TELL ME MORE</a>
        </div>
</header>