如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接信息。

在本篇文章里面,苏南大叔将讲述窗体透明的有关设置项目,transparent: true。经过实践,窗体透明效果有限,大家请有所心理准备。当然,大家也可以看看好的效果。

如何实现 electron 窗体透明 transparent 效果? - electron-transparent
如何实现 electron 窗体透明 transparent 效果?(图15-1)

关键代码

关键代码就是BrowserWindow下的一个参数:transparent: true。使用方式如下图所示:

如何实现 electron 窗体透明 transparent 效果? - mac_tras_code
如何实现 electron 窗体透明 transparent 效果?(图15-2)

效果截图

window下截图:

如何实现 electron 窗体透明 transparent 效果? - win_tras_true
如何实现 electron 窗体透明 transparent 效果?(图15-3)

mac下截图:

如何实现 electron 窗体透明 transparent 效果? - mac_tras_2
如何实现 electron 窗体透明 transparent 效果?(图15-4)

可能和预期不一致的效果截图:

不要怀疑,下面的截图,也是设置了transparent: true的效果截图。

如何实现 electron 窗体透明 transparent 效果? - mac_tras_1
如何实现 electron 窗体透明 transparent 效果?(图15-5)

如何实现 electron 窗体透明 transparent 效果? - mac_tras_3
如何实现 electron 窗体透明 transparent 效果?(图15-6)

如何实现 electron 窗体透明 transparent 效果? - win_fail
如何实现 electron 窗体透明 transparent 效果?(图15-7)

mac下面保留交通灯区域按钮

mac下面,边框实际上也会被透明化,并且保留了交通灯区域的三个按钮。但是和上一节中的'titleBarStyle': 'hidden'的效果是不一致的。

大家可以看看对比图。两者的按钮位置不同。

transparent: true:

如何实现 electron 窗体透明 transparent 效果? - mac_tras_1
如何实现 electron 窗体透明 transparent 效果?(图15-5)

titleBarStyle: 'hidden':

如何实现 electron 窗体透明 transparent 效果? - mac_frameless2
如何实现 electron 窗体透明 transparent 效果?(图15-9)

主窗体的透明,需要页面css无背景色设置

再次对比一下,大家可以看到区别。

如何实现 electron 窗体透明 transparent 效果? - mac_tras_2
如何实现 electron 窗体透明 transparent 效果?(图15-4)

如何实现 electron 窗体透明 transparent 效果? - mac_tras_3
如何实现 electron 窗体透明 transparent 效果?(图15-6)

后者,我们设置了body的背景色为白色#ffffff

如何实现 electron 窗体透明 transparent 效果? - mac_tras_code_2
如何实现 electron 窗体透明 transparent 效果?(图15-12)

win下面必须配合frame属性

window下,如果不配合frame属性,可能你仅仅会得到这样的效果:

如何实现 electron 窗体透明 transparent 效果? - win_tras_fail_code
如何实现 electron 窗体透明 transparent 效果?(图15-13)

而配置设置了frame之后,效果如下:

如何实现 electron 窗体透明 transparent 效果? - win_tras_true
如何实现 electron 窗体透明 transparent 效果?(图15-14)

如何实现 electron 窗体透明 transparent 效果? - win_tras_true_code
如何实现 electron 窗体透明 transparent 效果?(图15-15)

总结

透明背景后,边框的阴影也是不存在的,这点也要注意的。

更多苏南大叔的electron文章,请点击这里查看:

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   electron

本站的忠实读者小伙伴,正在阅读下面这些文章:

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
欢迎指正文字或逻辑错误,将会择优在文末列出您的信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!