背景毛玻璃效果 css,CSS backdrop-filter实现背景毛玻璃效果

CSS背景滤镜backdrop-filter

有人说backdrop-filter和filter的语法类似。错！不是类似，是一模一样，如出一辙，毫无二致。

看下面的对比表：

backdrop-filter语法

filter语法

/* 关键字值 */

backdrop-filter: none;

/* URL方式外链SVG filter */

backdrop-filter: url(zxx.svg#filter);

/* 值 */

backdrop-filter: blur(2px);

backdrop-filter: brightness(60%);

backdrop-filter: contrast(40%);

backdrop-filter: drop-shadow(4px 4px 10px blue);

backdrop-filter: grayscale(30%);

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

backdrop-filter: invert(70%);

backdrop-filter: opacity(20%);

backdrop-filter: sepia(90%);

backdrop-filter: saturate(80%);

/* 关键字值 */

filter: none;

/* URL方式外链SVG filter */

filter: url(zxx.svg#filter);

/* 值 */

filter: blur(2px);

filter: brightness(60%);

filt