如何在滑块图像上应用深蓝色滤镜

Question

我正在尝试制作深蓝色滤镜已经有几个小时了！因此，不仅是“灰度”使用或亮度过滤器。 我听说过SVG，并试图了解如何在这种情况下使用它，但我甚至不知道SVG是否适用于我的情况，尝试了所有这些webkit过滤器，并过滤了属性，而且我真的不能得到那个深蓝色的过滤器

而且在谷歌我无法找到如何使一个深蓝色的过滤器，或其它自定义过滤器

我只能通过编辑图像，不过我真的需要使它CSS，JS什么的。

我告诉你结果想：

图像不带过滤器

图像的过滤器

如果有人可以帮助我，给一些想法，或者一些代码，以帮助这将是非常好

在此先感谢您的帮助！

Answer 1

这可以在css中实现，一种方法是在图像容器上使用pseudoelement。

为pseudoelement指定所需的背景颜色，并设置opacity。如果您喜欢，您可以在这里使用rgba。

div { 
 
    width: 500px; 
 
    position: relative; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: auto; 
 
    vertical-align: bottom; 
 
} 
 

 
div:after { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    content: ''; 
 
    background: darkblue; 
 
    opacity: .4; 
 
}

<div> 
 
    <img src="https://i.stack.imgur.com/45yOV.jpg"> 
 
</div>

Answer 2

您需要使用包装

<style> 
    #Wrapper{ 
     background:url(http://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg); 
     width:1300px; 
     height:1300px; 
    } 

    #Content{ 
     background-color:rgba(74, 136, 209,0.7); 
     width:100%; 
     height:100%; 
    } 
</style> 
<div id="Wrapper"> 
    <div id="Content"> 

    </div> 
</div> 

Answer 3

来到的<canvas>世界，这个任务将变得轻而易举。例如。 FarbicJS会给你很多的过滤器，但一定要定制你的库，所以它不会太大。或从其他许多人中选择here on github。

我觉得这个看起来不太好：https://www.viget.com/articles/instagram-style-filters-in-html5-canvas

Answer 4

使用CSS filter性的判定... contrast和brightness的组合似乎工作得很好。

div { 
 
    width: 80%; 
 
    margin: 1em auto; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    filter: contrast(45%) brightness(95%) 
 
}

<div> 
 
    <img src="https://i.stack.imgur.com/45yOV.jpg" alt=""> 
 
</div>