简单的CSS阈值过滤器
#css #网络开发人员 #教程 #code

编码 - dude.com上的原始文章：CSS Threshold Filter

有许多应用程序具有阈值工具，包括Photoshop，GIMP等。甚至有免费的在线应用程序可以使您可以在线将阈值过滤器应用于图像。例如，来自MockoFun的stencil maker是免费在线应用程序的一个很棒的例子。它基本上将阈值过滤器应用于任何照片，并将其转换为像著名的Bansky Street Art Designs这样的模板。

Stencil Maker on MockoFun
Image description

CSS阈值过滤器 - 代码

因此，HTML代码只是一个简单的图像：

<img src="https://i.imgur.com/r4csVkj.jpeg" alt="CSS Stencil Filter" class="threshold">

我们添加了CSS类名称阈值，这是我们将CSS阈值过滤代码放置的位置：

`：root {
- 阈值：50％;
}

threshold {
过滤器：亮度（计算（100％ + var（ - 阈值）））灰度（100％）对比度（1000％）;
}`

所以，让我们看一下此代码，并解释一下发生了什么。

:root{ --threshold:50%; }

此行在文档的根部设置一个名为--threshold的CSS变量，该变量是过滤器的阈值。在这种情况下，阈值设置为50％，表明灰度值低于50％的像素将变黑，而高于50％的像素将变白。

此变量是可选的，因为您可以简单地将值放入.threshold类CSS代码中，但这是将阈值值分开的便捷方法。如果您想使阈值动态化，那么这将特别有用。更改阈值就像更改此CSS变量一样容易。

.threshold{ ... }

此CSS类Selector的目标元素具有类名阈值，并将一系列过滤器效应应用于它们。效果组合以创建阈值滤波器。

让它分解：

  1. brightness(calc(100% + var(--threshold)))：在这里，亮度过滤器用于调整图像的整体亮度。 calc（）函数将原始亮度（100％）与存储在 - 阈值变量中的自定义阈值。这有效地亮了高于阈值的像素。
  2. grayscale(100%)：灰度过滤器以最大强度（100％）应用，将图像转换为灰度。
  3. contrast(1000%)：对比度过滤器用于通过将对比度提高到1000％的对比度来增强黑色和白色像素之间的对比度 - 仅产生黑白像素的足够大的值，这就是我们对阈值滤镜所需的。<<<<<<<<<<<<<<<<<<<<<<<< /li>

综上所述

在Web设计中，CSS阈值过滤器是具有复杂照片效果的非常通用的工具。使用此简单的过滤器，您可以实现一些非常酷的效果，从而使您的设计脱颖而出。

我们得出这段旅程的结论，请记住，CSS过滤器是通向无限创造力的门户。实验是您的指南针，导致您探索超出阈值。为什么不冒险应用vintage photo filters using CSS或合并各种过滤器以进行令人叹为观止的效果？画布是您的绘画，并且可能性是无限的。拥抱创新，让CSS阈值过滤器成为设计杰作的垫脚石。释放代码将普通变成非凡的代码的力量，并观察您的网页设计像以前从未如此活跃。