使从彩色到灰度的图像在会合点处具有淡入淡出

我试图制作一个从彩色到灰度的图像在颜色和灰度之间的交汇点处有淡化或平滑的东西而不是尖锐的线条.

这就是我所拥有的:http://jsfiddle.net/gmU9y/104/

    


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

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

.image-container:after {
    background-image: url("https://img.php1.cn/3cd4a/1e618/bdf/129913486c37ddf6.jpeg");
    content: "";
    height: 30%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

(注意颜色和灰度之间的汇合处有一条尖锐的线)

我需要它看起来更像这样:

我真的需要帮助,任何意见或建议将不胜感激.谢谢

您可以使用背景混合模式获得此功能(但您需要将图像设置为背景,而不是图像元素)

它是如何工作的 :

我们在第一层有图像.它上面的另一层是从白色到黑色的渐变,混合模式是倍增的.乘以黑色给出黑色,乘以白色保持原始图像.所以现在,我们有一个图像,我们可以保留或丢弃原始颜色,并决定基于梯度光度.第三层也是图像,现在混合为光度.应用于黑色底座上,将图像显示为灰度.应用于同一图像,将给出彩色图像.您可以设置更改渐变级别所需的灰度

.test {
    width: 400px;
    height: 400px;
    background: url("https://img.php1.cn/3cd4a/1e618/bdf/129913486c37ddf6.jpeg"), 
      linear-gradient(0deg, black 0%, black 20%, white 80%, white 100%), 
      url("https://img.php1.cn/3cd4a/1e618/bdf/129913486c37ddf6.jpeg"); 
    background-position: 0px 0px;
    background-size: cover, 100% 100%, cover;
    background-blend-mode: luminosity, multiply;
}