CSS3 - Backdrop-Filter - 《代码知识结构》

filter:grayscale基础应用

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

滤镜的使用示范
https://www.zhangxinxu.com/wordpress/2019/06/fdcon2019-css-share/

/* 关键词值 */
backdrop-filter: none;
/* 指向 SVG 滤镜的 URL */
backdrop-filter: url(commonfilters.svg#filter);
/* <filter-function> 滤镜函数值 */
backdrop-filter: blur(2px); // blur    模糊
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%);//饱和度
/* 多重滤镜 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
/* 全局值 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: unset;

// 反色实现简单的颜色反转

.icon-delete {
    display: inline-block;
    width: 18px; height: 18px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cpath ...fill='%234c5161'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    vertical-align: -4px;
    margin-right: 5px;
}
.ui-button-primary .icon-delete {
    filter: brightness(100);
}
<a href="##" class="ui-button">
    <i class="icon-delete"></i>删除
</a>
<a href="##" class="ui-button ui-button-primary">
    <i class="icon-delete"></i>删除
</a>

Backdrop-Filter

filter:grayscale基础应用