图像插画滤镜

我喜欢那种效果，图像看起来几乎像是油画或用浓稠、易流动的墨水钢笔绘制的插画。我是在 Scott Vandehey 在 Cloud Four 博客上分享了他的 “半色调滤镜”效果 时得到这个想法的。

我认为它看起来很像报纸印刷

诀窍？我们有一个充满 CSS filter 效果的图像，以及一个设置为超小 background-size 的底层 重复径向渐变，以获得点状效果，并通过 mix-blend-mode 增强。

Scott 的文章的全部思想是展示 CSS 混合模式的强大功能。因此，我采用了图像上的滤镜效果

img {
  /* ... */
  filter:
    grayscale(1) 
    brightness(80%) 
    contrast(150%) 
    blur(2px);
  mix-blend-mode: $blend-mode;
}

…并做了一些调整，即

• 稍微增加 blur()（4px）
• 将 contrast() 提高到一个不可思议的程度（3000%）
• 使用 screen 混合模式

以下是 CSS 中的效果

.painted {
  background: repeating-radial-gradient(
    circle at center,
    hsl(0 0% 15%),
    hsl(16.1 5% 55.5%);
  );
  background-size: 5px;
}

.painted img {
  filter: blur(4px) contrast(3000%) grayscale(1);
  mix-blend-mode: screen;
  width: 100%;
}

您可能需要根据图像调整那个巨大的 contrast() 值——足够大的值才能使图像褪色。