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

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

  1. /* 关键词值 */
  2. backdrop-filter: none;
  3. /* 指向 SVG 滤镜的 URL */
  4. backdrop-filter: url(commonfilters.svg#filter);
  5. /* <filter-function> 滤镜函数值 */
  6. backdrop-filter: blur(2px); // blur 模糊
  7. backdrop-filter: brightness(60%); // 亮度
  8. backdrop-filter: contrast(40%); // 对比
  9. backdrop-filter: drop-shadow(4px 4px 10px blue); //投影
  10. backdrop-filter: grayscale(30%); //灰度
  11. backdrop-filter: hue-rotate(120deg); //色调变化
  12. backdrop-filter: invert(70%); // 反相
  13. backdrop-filter: opacity(20%);// 透明度
  14. backdrop-filter: sepia(90%); // 褐色
  15. backdrop-filter: saturate(80%);//饱和度
  16. /* 多重滤镜 */
  17. backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
  18. /* 全局值 */
  19. backdrop-filter: inherit;
  20. backdrop-filter: initial;
  21. backdrop-filter: unset;

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

  1. .icon-delete {
  2. display: inline-block;
  3. width: 18px; height: 18px;
  4. 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");
  5. background-size: 100% 100%;
  6. vertical-align: -4px;
  7. margin-right: 5px;
  8. }
  9. .ui-button-primary .icon-delete {
  10. filter: brightness(100);
  11. }
  12. <a href="##" class="ui-button">
  13. <i class="icon-delete"></i>删除
  14. </a>
  15. <a href="##" class="ui-button ui-button-primary">
  16. <i class="icon-delete"></i>删除
  17. </a>

image.png

filter:grayscale基础应用

点亮徽章再也不需要两张图了,只需要准备一张彩图,至于没有激活的灰图,我们可以使用滤镜控制:
image.png