文章标签

我最近遇到了一种很酷的效果，称为 玻璃质感，在 一个 Dribble 帖子中。我第一个想法是，如果我使用一些表情符号作为图标，而不浪费时间……我可以快速地在几分钟内重新创建它。

我喜欢这些小帖子，它们通过使用一个鲜为人知的属性，用一行 CSS 代码解决了一些看起来很棘手的设计问题。在这种情况下，设计是一个磨砂玻璃效果，而 CSS 属性是 backdrop-filter……

Apple Arcade 的登录页面有一个很酷的效果，其中一些“白色”文字具有半透明效果。你可以通过文字看到背景颜色。它不像 击穿文字……

CSS 中的 backdrop-filter 属性用于将 滤镜效果（grayscale、contrast、blur 等）应用于元素的背景/底层。backdrop-filter 与 filter 属性具有相同的效果，只是滤镜效果是……

你可以使用 filter 属性轻松地将滤镜 应用于整个元素。但是，如果你只想将滤镜应用于元素的背景呢？这很奇怪，很难实现。

有一些 CSS 属性专门……

在昨天之前，我从未听说过 backdrop-filter 属性，但在花几个小时玩弄它之后，我确信它不过是一种魔术。这是因为它添加了滤镜（例如改变色调、对比度或……