- Published on
CSS-filter
前言
CSS filter 是一个非常强大的属性，可以实现很多有趣的效果，但是很多人可能不知道，CSS filter 还可以实现一些意想不到的效果，比如实现一个类似 Photoshop 的滤镜效果，或者实现一个类似 Instagram 的滤镜效果。
filter 的基本用法
filter属性通过设置不同的滤镜，可以直接作用在我们的元素上。如下直接作用在 <img/> 元素上：
backdrop-filter
backdrop-filter是一个CSS属性，允许您对元素后面的区域应用图形效果，例如模糊或颜色偏移。它用于对元素的背景或底色应用滤镜效果，包括灰度、对比度、模糊等。为了看到效果，元素或其背景必须是半透明的。这是一个强大的工具，可以增强网页设计的视觉吸引力，并创造更复杂和引人注目的用户界面。
一些问题
当使用 backdrop-filter 时，他只严格会对元素后面的区域应用滤镜效果，而对元素的周围区域不会应用滤镜效果。（可以看看上面图片的效果👆）
第一步： 既然想让元素周围的区域也应用滤镜效果，那么就需要将元素覆盖住周围的区域。里边可以加一个子元素，子元素的高度为父元素的两倍。
第二步：裁剪一下使用 overflow: hidden
你在这里看到的效果取决于你的浏览器。在 Firefox 和 Safari 上，效果很棒！但在 Chrome 上无法实现。没有柔和的黄色光晕。
这应该浏览器的执行顺序导致的，是因为先应用了 overflow: hidden，然后再应用了 backdrop-filter。
我们可以用 mask-image 这个属性来达到类似的效果。在所有浏览器中，遮罩算法都是在滤镜之后进行的。✨
mask-image 是一个 CSS 属性，它允许你使用图像（包括实际的图片文件、SVG 或 CSS 渐变）来遮罩（或称“蒙版”）一个 HTML 元素。它的核心概念是：遮罩图像的透明度或亮度决定了被遮罩元素的哪些部分是可见的，哪些是隐藏的。
可以把它想象成在你的元素（比如一张图片或者一个 div）上放了一张透明的“贴纸”。这张贴纸的透明度不同区域会影响下面元素对应区域的可见性。
mask-image 属性通过分析你提供的遮罩图像的**透明度（alpha 通道）或亮度（luminance）**来工作。可以通过mask-mode属性来控制遮罩图像的模式。
OK！那么问题来了，如果有字体在遮罩区域下，字体也会被遮罩掉，我们无法选中字体。请尝试选中下面的字体，你会发现无法选中。
怎么解决呢？给遮罩区域添加一个 pointer-events: none，这样就不会影响到字体的选中了。这也就是为什么我们需要一个子元素来做遮罩，而不是直接在其父元素上做遮罩，我们是不希望<header>本身受到影响的，因为它通常是网站的导航栏。
还有一个小问题（如果追求完美的话）： 当元素进入视口前，我们是通过延伸玻璃背景，让backdrop-filter提前作用与元素。那么当元素离开视口呢？不做任何措施的话，顶部会有一点闪烁。因为离开视口的同时，也离开了视野，所以没办法继续应用backdrop-filter。但是可以设置一个从上到下，从黑到透明的渐变，这样就不会有闪烁了。
还可以再完美一点，可以设置一个玻璃边缘