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

Question

我已经尝试了几个小时来制作深蓝色滤镜！所以，不仅是 "greyscale" 使用或亮度过滤器。我听说过 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 will give you a lot of filters, but make sure to custom build your lib so it doesn't get too big. Or choose from many others 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>

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

How to apply a dark blue filter on an slider image

css

svg

svg-filters

css-filters