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>
filter:grayscale基础应用
点亮徽章再也不需要两张图了,只需要准备一张彩图,至于没有激活的灰图,我们可以使用滤镜控制: