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

Question

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

在Google上，我找不到如何制作深蓝色滤镜或其他自定义滤镜

我只能自己编辑图像，但我真的需要使用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会给你很多过滤器，但请确保自定义构建你的lib，这样它就不会太大。或者从许多其他人中选择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>