Electron中使用Backdrop-filter的方法(实现高斯模糊滤镜)

       当CSS中的blur滤镜无法满足我们时,我们会探索到更加有趣的backdrop-filter,它使我们的网页模糊效果更加出众。具体的区别可以参照这位前辈写的文章。

Chrome浏览器默认并不支持渲染这种效果,需要通过访问

chrome://flags/

打开Experimental Web Platform features即可观看到此效果(可以访问苹果官网观察导航栏的效果)。

好了,本文重点来了,Electron中并不支持我上面提到的操作,国内有些论坛上的解决方法并不奏效,可以试试如下方法:

  1. 找到用于创建窗体的index.js文件;
  2. 参照如下代码补充webPreferences: {experimentalFeatures: true}
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {experimentalFeatures: true},
    });

     

运行测试一下

 

你可能感兴趣的:(Electron)