CSS degrade haritasına sahip kırpma maskeleri

Question

CSS ile böyle bir deneyim yaratmanın bir yolu var mı?

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

bulunmaktadır (# 663.897 için # 02ccfe den) gradyan harita ile bir kırpma maskesi görüntüye uygulanan.

Degrade arka plan ile bir bindirme oluşturmayı denedim, ancak farklı. Tamamen kayboldum, internette bir şey bulamıyorum. :(

teşekkür ederiz

Answer 1

bence belki böyle bir şey arıyor:

.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>

bu Internet Explorer çalışmaz unutmayın (browser support)