在 CSS 中创建 photoshop 图层混合效果

Question

我需要提供这张图片css。必须在图像上放置一个图层。我无法获得完全相同的外观。有针对这个的解决方法吗？它也可以是 SVG 滤镜。

预期结果：

我试过了，但是我做不到。

div {
  width: 400px;
  height: 800px;
  background-image: url("https://i.stack.imgur.com/z5W7Q.jpg");
  background-color: rgba(16, 24, 45, 0.8);
  background-size: contain;
  background-repeat: no-repeat;
  background-blend-mode: darken;
}

<div></div>

Answer 1

在div（z-index: -1）下的一个伪元素（::before）上设置图片，并使用grayscale filer将其转换为黑&白色的。

在 div.

上设置半透明背景颜色 (rgba(16, 24, 45, 0.8))

div {
  position: relative;
  width: 400px;
  height: 400px;
  background: rgba(16, 24, 45, 0.8);
}

div::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://i.stack.imgur.com/z5W7Q.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  filter: grayscale(1);
  z-index: -1;
  content: '';
}

<div></div>

Answer 2

我很晚才解决这个问题。我最好在这里添加它。 .

div {
  width: 400px;
  height: 400px;
  background-image: url("https://i.stack.imgur.com/z5W7Q.jpg");
  background-color: rgba(16, 24, 45, 0.8);
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: darken;
  position: relative;
}

div::before,
div::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

div::before {
  background-color: gray;
  mix-blend-mode: color;
}

div::after {
  mix-blend-mode: overlay;
  background-color: #98aeea;
}

<div></div>

在 CSS 中创建 photoshop 图层混合效果

Creating photoshop layer blend effects in CSS

html

css

svg

background-blend-mode

mix-blend-mode