Untitled

<!DOCTYPE html>
<html>

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

  <body>
   <div class='bg'>
     
     <span class='bg-contrast-font'>Beautiful Scenary</span>
     
   </div>
  </body>

</html>

// Code goes here

/* Styles go here */

.bg{
   background: url('https://unsplash.it/350/300/?random') no-repeat;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    height: 400px;
    opacity:0.6;
    color: white;
    padding: 10px;
    font-size: 40px;
}

.bg-contrast-font{
  position: relative;
    background-image: inherit;
    -webkit-background-clip: text;
    color: white;
    
    -webkit-filter: invert(100%) sepia(100%);
    
    filter: invert(100%) sepia(100%);
    text-align: left;
}