css - 使用过滤器属性对图像进行着色

Question

我正在尝试向图像添加红色叠加层，以便使用 css filter 属性获得以下结果:

我目前的代码确实添加了一个叠加层，但我似乎无法获得与上图相同的结果。

img {
   filter: sepia() saturate(4) hue-rotate(312deg) brightness(80%) opacity(5);
}

给我以下结果:

代码片段来自 Lea Verou，你可以在这里玩:http://dabblet.com/gist/b338c9940a31b727b7a9

为了获得与第一张图片所示相同的结果，我应该如何更改我的 CSS？

Answer 1

您应该尝试混合背景颜色(红色)而不是旋转色调。然后您可以调整饱和度以获得所需的效果。

.filter {
  position: relative;
  -webkit-filter: brightness(81%) saturate(113%);
  filter: brightness(81%) saturate(113%);
}
.filter::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  background: rgba(253, 62, 65, 0.91);
}

您可以使用这样的网站来生成您可以使用的代码。

https://www.cssfilters.co/