backdrop-filter 属性。

以下是一系列图像(img)元素,每个元素上都放置了一个 div。每个 div 都使用不同类型的背景滤镜进行样式设置。

简单的模糊效果。

backdrop-filter: blur(10px)

上图的 CSS 代码是

-webkit-backdrop-filter: blur(10px);

反转颜色。

backdrop-filter: invert()

上图的 CSS 代码是

-webkit-backdrop-filter: invert();

多个滤镜。

backdrop-filter: sepia() hue-rotate(120deg)

上图的 CSS 代码是

-webkit-backdrop-filter: sepia() hue-rotate(120deg);

动态背景。

动态背景

上图的 CSS 代码是

-webkit-backdrop-filter: blur(10px);