Clipping-Masken mit Farbverlaufs-Map in CSS

Question

Gibt es eine Möglichkeit, eine solche Erfahrung mit dem CSS zu erstellen?

https://www.dropbox.com/s/9kid0skuifhr5jj/Screen%20Shot%202016-03-19%20at%2017.33.16.png?dl=0

Es gibt eine Schnittmaske mit der Gradienten Karte (von # 663.897 bis # 02ccfe) auf ein Bild angewandt.

Ich habe versucht, ein Overlay mit dem Hintergrund mit Farbverlauf zu erstellen, aber es ist anders. Ich bin völlig verloren, kann nichts im Internet finden. :(

Danke

Answer 1

Ich denke, vielleicht suchen Sie so etwas wie dieses:

.container { 
 
    width: 500px; 
 
    height: 300px; 
 
    position: relative; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: -moz-linear-gradient(left, #02ccfe 0%, #663897 100%), url(http://placekitten.com/g/500/300); 
 
    background: -webkit-linear-gradient(left, #02ccfe 0%, #663897 100%), url(http://placekitten.com/g/500/300); 
 
    background: linear-gradient(to right, #02ccfe 0%, #663897 100%), url(http://placekitten.com/g/500/300); 
 
    background-blend-mode: hard-light; 
 
} 
 

 
h1 { 
 
    color: #FFF; 
 
    position: relative; 
 
    top: 25%; 
 
    left: 50px; 
 
}

<div class="container"> 
 
    <div class="overlay"></div> 
 
    <h1> 
 
    Lorem Ipsum 
 
    </h1> 
 
</div>

Beachten Sie, dass dies in Internet Explorer nicht (browser support)