Renkten gri tonlamaya giden bir görüntünün buluşma noktasında bir solma olmasını sağlayın

Question

Renkten gri tonlamaya giden bir görüntü oluşturmaya çalışıyorum, renk ve gri tonlar. İşte

i var ne: http://jsfiddle.net/gmU9y/104/

<div class="image-container"> 
    <img class="image-grey" src="http://wallpapernesia.com/wp-content/uploads/2014/12/colorful_wallpaper_45_backgrounds-1024x576.jpg" /> 
</div> 

.image-container { 
    position:relative; 
    display:inline-block; 
} 

.image-grey { 
    display:block; 
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%); 
} 

.image-container:after { 
    background-image: url("http://wallpapernesia.com/wp-content/uploads/2014/12/colorful_wallpaper_45_backgrounds-1024x576.jpg"); 
    content: ""; 
    height: 30%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
} 

Ben de buna benziyor ihtiyaç

(renk ve gri tonlama arasındaki buluşma noktasında keskin bir çizgi var dikkat edin):

Gerçekten yardıma ihtiyacım var ve herhangi bir öneri veya öneri çok takdir edilecektir. Teşekkürler.

Answer 1

arka plan harman modu ile bu alabilirsiniz (ama:

Ardından vb parlaklığı ayarlamak için bazı filtrelerin ile

etrafında oynayabilir ilkel kod şu şekilde görünecektir bunun yerine Nasıl çalışır

) bir görüntü elemanının, arka plan olarak resim ayarlama gerekir:

Biz ilk katmanda görüntü var. Üzerinde başka bir katman, beyazdan siyaha giderken eğimdir ve karışım modu çoğalır. Siyahla çarpma siyah verir, beyazla çarparak orijinal görüntüyü tutar. Şimdi, orijinal rengi saklayabileceğimiz ya da atabileceğimiz bir imajımız var ve karar, gradyan parlaklığını temel alıyor. Üçüncü katman yine görüntüdür ve şimdi de parlaklık olarak harmanlanmıştır. Siyah bir temel üzerinde uygulanan, görüntüyü gri tonlama olarak verecektir. Aynı görüntü üzerinde uygulanan renkli görüntüyü verecektir. Sen

.test { 
 
    width: 400px; 
 
    height: 400px; 
 
    background: url("http://wallpapernesia.com/wp-content/uploads/2014/12/colorful_wallpaper_45_backgrounds-1024x576.jpg"), 
 
     linear-gradient(0deg, black 0%, black 20%, white 80%, white 100%), 
 
     url("http://wallpapernesia.com/wp-content/uploads/2014/12/colorful_wallpaper_45_backgrounds-1024x576.jpg"); 
 
    background-position: 0px 0px; 
 
    background-size: cover, 100% 100%, cover; 
 
    background-blend-mode: luminosity, multiply; 
 
}

<div class="test"></div>

Answer 2

Resmin üzerine bir div (veya belki de bazı sahte elemanlar) koyabilirsiniz, siyahtan saydam gradyanı ona verin ve sonra bir mix-blend-mode CSS kuralı uygulayın.

<style> 
.graylayer{ 
width:1024px; 
height:576px; 
background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,1)); 
mix-blend-mode:saturation; 
} 
img,div{ 
position:absolute; 
} 
</style> 
<img src="http://wallpapernesia.com/wp-content/uploads/2014/12/colorful_wallpaper_45_backgrounds-1024x576.jpg"/> 
<div class="graylayer"></div>