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

body {
  margin: 0;
  background: linear-gradient(to bottom, blue, orange);

  --image: url("https://images.unsplash.com/photo-1565619624098-cf4168a7cd9d?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTE0NzYzMQ&ixlib=rb-1.2.1&q=85");
  --transparent: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

div {
  background-image: var(--image);

  @supports (background: -webkit-cross-fade(url(), url(), 50%)) {
    background-image: -webkit-cross-fade(
      var(--image),
      var(--transparent),
      var(--bg-opacity)
    );
  }

  background-size: cover;
  flex: 1;
}

div:nth-child(1) {
  --bg-opacity: 20%;
}
div:nth-child(2) {
  --bg-opacity: 50%;
}
div:nth-child(3) {
  --bg-opacity: 80%;
}

section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  gap: 40px;
  padding: 40px;
  box-sizing: border-box;
  flex: 1;
}