Is there any way to make a portion of the electron window transparent? Like for example the area where the move is moved over?
I have the following snippet in my electron file:
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
},
transparent: true,
frame: false,
...
})
And the following 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:
The problem is when I show the background color I can see the background through the circle that is following the 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.
Figured it out!
Turns out I can use a box-shadow
around the cursor circle:
.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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.