CSS 速成：背景滤镜

什么是 CSS Quickes？

我开始在 Instagram 上询问我喜爱的社区：“哪些 CSS 属性让您感到困惑？”

在“CSS Quickies”中，我将深入讲解一个 CSS 属性。这些属性是社区请求的。如果您也对某个 CSS 属性感到困惑，请在Instagram、Twitter或下方评论区留言。我会解答所有问题。

我也在twitch.tv上一边写代码一边直播。如果你想直接联系我！

让我们来讨论一下：backdrop-filter

Instagram问@kamil.codes我是否知道这个 CSS 属性。我只能说我不知道​​，或者我忘了它！

在继续之前，我想先提一下，因为对我来说最大的遗憾是 Firefox 不支持这个属性！所以，如果你正在尝试这些示例，你需要在 Chrome 76+、Edge 17+ 或 Safari 9+ 中打开它们才能看到它们。为了确保你的浏览器支持此功能，请查看caniuse表。所以这还远远没有达到生产环境的水平。

那么它起什么作用呢backdrop-filter？

它允许您对正在使用效果/滤镜的元素背后的所有内容应用效果/滤镜！它不会应用于文本或元素内部的元素。这就是background。backdrop-filter要查看效果，元素不能应用任何背景色。如果您将 设置background-color为white，那么您只会看到白色，而不会看到任何效果！

CSS 有哪些过滤器backdrop-filter？

模糊（）

这是标准的模糊函数。值越高，模糊效果看起来就越明显。

亮度（）

1 或 100% 是默认值。如果您想让图片变暗，则需要将其设置为低于 100% 的值；如果您想让图片变亮，则需要将其设置为高于 100% 的值。

对比（）

这些值的作用与亮度属性相同。亮度与亮度的区别在于，如果将图片调亮，每个像素的颜色都会变浅。而对比度则会增强原本明亮的区域，并减少较暗的区域。

阴影()

这个解释起来有点难，可以单独写一篇文章！它的基本工作原理和其他的阴影函数一样。如果你现在真的想了解它，可以看看drop-shadow() MDN。

灰度（）

灰度图像表示图像中的光量。换句话说，允许的颜色只有黑色、灰色和白色。黑色表示该像素完全黑暗，白色表示图像中光强度最强。灰色表示介于黑色和白色之间的强度。将灰度值设置为 0 不会改变背景。1 或 100% 表示该图像完全为灰度。所有图像都会根据该值进行混合。

色相旋转（度）

以下解释是对色调的过度简化。这足以理解此属性。想象一个圆。这个圆的度数从 0 到 360（是的，我知道严格来说它只有 360 度）。现在想象一下，从 0 到 360 的每个值都有一种颜色。其中 0 度代表红色，120 度代表绿色，240 度代表蓝色，依此类推。想象一下，你的图片现在有一个红色像素，换句话说，它的色调值为 0。现在我们将圆旋转 120 度，原来的红色像素就变成了绿色。这就是它被称为的原因hue-rotate。

倒置（）

这个函数的作用和你想象的完全一样。它会反转颜色。黑色会变成白色，白色会变成黑色。其余颜色的理解起来稍微有点棘手。为此，你需要了解色轮的构造和工作原理。由于这个 CSS 快速入门教程太深奥了，所以我建议你参考一下这个色轮。选择第一个 Harmony 色轮，你可以尝试不同的颜色，这样你就能体会到反转的作用了。

不透明度()

不透明度是透明度的另一种说法。1 或 100% 是默认值，表示背景完全不透明。0 表示背景不可见。例如，80% 表示您可以通过背景看到一点点，等等。

棕褐色（）

我们都知道棕褐色，对吧？即使是最便宜的图像处理软件也拥有这种效果。它大约有130年的历史，实际上是一种让黑白照片更温暖的方法。由于实现这种效果的化学品需要直接涂在相纸上，它还能延长照片的保存时间。

饱和（）

啊，饱和度是每个人都会用到的效果，也是最容易用过头的。把它设置为 1 或 100% 不会有任何效果。有趣的是，当我们把它设置为 2 或 200% 时，这意味着饱和度翻倍。这意味着，例如，红色现在的强度（纯度）将翻倍！所以，每个像素在眼睛看来的实例数量都会翻倍。把它设置为 0.5 或 50% 会降低颜色的强度，所有东西看起来都会更灰暗、更混杂。使用这个选项时要非常小心。

url(文件.svg#filter);

这是一个比较高级的主题，很难在短时间内解释清楚。如果你想了解更多，请告诉我！如果你现在需要了解，可以阅读这里：SVG 滤镜。

一些例子

请检查您的浏览器是否支持backdrop-filter。

模糊对比度饱和度

如你所见，我们可以组合多个滤镜，使效果更加美观。

倒置

hue-rotate

棕褐色灰度

资源

• backdrop-filter CSS 属性

• MDN 背景过滤器

感谢阅读！

打招呼！ Instagram | Twitter | LinkedIn | Medium