electron 重叠形状/div的特定CSS规则

wlsrxk51 于 2022-12-16 发布在 Electron

关注(0)|答案(1)|浏览(135)

我正在尝试重新创建一个截图应用程序，以便更好地理解HTML、CSS和Electron，到目前为止，我已经创建了一个键绑定，可以切换一个0.25不透明度的透明框和一个透明的红色框的叠加，透明框可以拖动以选择截图区域

由于红框是透明的，并且位于填充屏幕的不透明度为0.25的框的顶部，所以红框的不透明度与屏幕的其余部分相同。我希望红框内的区域“清除不透明度”，以便它被视为0.0不透明度，基本上是红框中的“明亮区域”，看起来与没有不透明度的屏幕相同。如下图所示

我试着将rgba设置为（0，0，0，0），但这并没有像我预期的那样改变任何东西，而且我找不到任何关于重叠元素的CSS文档。
你知道我该怎么做吗？

electron

来源：https://stackoverflow.com/questions/74076112/specific-css-rules-for-overlapping-shapes-divs

1条答案

按热度按时间

06odsfpq1#

我首先想到的是一个透明元素上的巨大的框状阴影，我不知道它的表现如何，但它确实有效。

.screenshot {
  position: fixed;
  top: 50px;
  left: 50px;
  width: 300px;
  height: 100px;
  border: 1px solid red;
  /* large box shadow */
  box-shadow: 0 0 0 max(100vw, 100vh) #0005;
}

<div class='screenshot'></div>

赞(0）回复(0）举报 2022-12-16

我来回答

electron 重叠形状/div的特定CSS规则

1条答案

相关问题

热门标签

最新问答