backdrop-filter是什么

  • 跟filter类似,属性设置一样,不过它适用元素背后元素

  • 1

  • 2

    这种效果在苹果中很常见,最早也只有在safari浏览器兼容
    通过这个属性,可以很简单地创建毛玻璃效果

  • 然而普通的filter一旦应用,所有元素都会受影响,比如字体也看不清

  • 3

  • 通过backdrop-filter可以很好解决问题

本站应用此效果

  • 4

  • 5

但是你可能看不到此效果,因为此特性兼容性不太好

  • 通过查询can i use,可以看到基本国产浏览器都不支持,firefox也必须手动开启特性才能看到

  • 6

  • chrome很好的支持了,nice~

兼容性

  • 经过试验,的确firefox看不到,很影响阅读

  • 7

  • 所以不兼容的请手动点网站右下角设置开启夜间模式,以免影响阅读

  • 其他手机浏览器,chrome内核的基本都支持,qq浏览器等不支持.

毛玻璃其他解决方案

其他方法可能兼容性更高,就查找了几篇

纯css实现

  • 效果也是不错的,不过需要绝对布局

在线源码演示

  • 根据需求可以改改

用js库实现

在线源码演示


总之,一个道理,”省力不省功”


References