javascript - 如何使用 CSS3 或 JavaScript 获得填充效果

Question

我有这张图片：

在这张图片中，您可以看到 7 滤镜效果。我可以使用 CSS3 过滤器属性生成灰度、棕褐色和反转。

现在，如何使用 CSS3 或 JavaScript获得Duotone、Warm、Cool 和 Dramatic的滤镜效果？

标签： javascriptcss

Answer 1

Duotone，温暖和凉爽的一些想法。我不确定你所说的戏剧性是什么意思，你能解释一下吗？

这里有一些双色调的资源：

https://cssduotone.com/

https://jmperezperez.com/duotone-using-css-blend-modes/

div {
  display: inline-flex;
  position: relative;
}

.duotone {
  background: yellow;
}

.duotone:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  background: blue;
  mix-blend-mode: lighten;
}

.duotone img {
  filter: grayscale(100%) contrast(1);
  mix-blend-mode: multiply;
}

.warm:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: orange;
  mix-blend-mode: overlay;
  opacity: .5;
}

.cold:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: blue;
  mix-blend-mode: overlay;
  opacity: .5;
}

body {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  grid-gap: 2rem;
}

h3 {
  margin: 0;
}

<h3>Original</h3>
<div><img src="https://source.unsplash.com/random/200x200"></div>

<h3>Duotone</h3>
<div class="duotone"><img src="https://source.unsplash.com/random/200x200"></div>

<h3>Warm</h3>
<div class="warm"><img src="https://source.unsplash.com/random/200x200"></div>

<h3>Cold</h3>
<div class="cold"><img src="https://source.unsplash.com/random/200x200"></div>