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

Question

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

以下是我所拥有的：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%;
}

（请注意，在颜色和灰度之间的汇合处有一条尖锐的线）

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

我真的需要帮助，我们非常感谢任何建议或建议。谢谢

Answer 1

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

它是如何运作的：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以在图像上方放置一个div（或者可能是一些伪元素），给它一个从黑色到透明的所需渐变，然后应用mix-blend-mode CSS规则。

然后，您可以使用某些滤镜来调整亮度等。

基本代码如下所示：

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