Conditionally Apply Styles Using Feature Queries

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div>
      <div class="Wrapper">
        <p>Hello World</p>
      </div>
    </div>
  </body>

</html>

.Wrapper {
  background-color: tomato;
  background-blend-mode: multiply;
}

@supports not (background-blend-mode: multiply) {
  .Wrapper {
    position: relative;
  }
  
  .Wrapper:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-color: tomato;
    opacity: 0.5;
  }
  
  .Wrapper p {
    position: relative;
    z-index: 2;
  }
}


.Wrapper {
  margin: 25vh 15vw;
  width: 70vw;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('https://placeimg.com/1024/684/any');
}

.Wrapper p {
  font-family: monospace;
  font-size: 4rem;
  font-weight: bold;
  color: antiquewhite;
}