使用滤镜属性对图像进行着色

Question

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

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

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

给我以下结果：

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

为了获得与第一张图片相同的结果，我应该更改为什么？

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/