[英]Electron make transparent circle in window?
Is there any way to make a portion of the electron window transparent?有什么方法可以使 electron window 的一部分透明? Like for example the area where the move is moved over?
例如,移动移动的区域?
I have the following snippet in my electron file:我的 electron 文件中有以下片段:
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
},
transparent: true,
frame: false,
...
})
And the following CSS:以及以下 CSS:
html, body {
cursor: none;
background-color: #121212;
}
.cursor {
width: 40px;
height: 40px;
border: 2px solid #fefefe;
border-radius: 100%;
position: fixed;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 9999;
}
When I disable the background color of the html, everything works as expected, the circle is see-through and so is the window:当我禁用 html 的背景颜色时,一切都按预期工作,圆圈是透明的,window 也是如此:
The problem is when I show the background color I can see the background through the circle that is following the cursor:问题是当我显示背景颜色时,我可以通过跟随 cursor 的圆圈看到背景:
I am trying to make it so the window is transparent inside that circle that is following the cursor position, so I can see the desktop behind the electron window through the cursor following circle. I am trying to make it so the window is transparent inside that circle that is following the cursor position, so I can see the desktop behind the electron window through the cursor following circle.
Figured it out!弄清楚了!
Turns out I can use a box-shadow
around the cursor circle:原来我可以在 cursor 圆圈周围使用
box-shadow
:
.cursor {
width: 40px;
height: 40px;
border: 2px solid #fefefe;
border-radius: 100%;
position: fixed;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 9999;
box-shadow: 0 0 0 9999px rgba(0, 0, 255, 1);
}
Thanks to: Hole in overlay with CSS感谢: 用 CSS 覆盖的孔
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.