使用 css 和 javascript 在 div 背景中创建透明 window

Question

我正在尝试在网页中实现效果。 网页必须用透明 window 的背景完全覆盖（此 window 基本上会突出显示页面的某些页面以引起用户注意）。 window的大小事先是未知的，必须在前端实现效果。 所以我可以随意使用 html、css 和 js。

我不知道仅使用 css 可以实现这种效果的方法。 而且我不能使用 png 图像背景之类的东西，因为透明 window 的大小和尺寸会动态变化。 我正在考虑为 div 元素生成 canvas 并将其用作背景图像。

这是否可以根据我的示例图像生成 canvas 并将其用作背景？ 你能举个例子吗？ 谢谢。

Answer 1

使用一个巨大的box-shadow ：

 body { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3999/Tilt-Shift_-_Cityscene.jpg); background-size: cover; height: 100vh; display: flex; justify-content: center; align-items: center; }.window { width: 150px; height: 150px; border: 5px solid red; box-shadow: 0 0 0 99999px rgba(0, 255, 0, .25) }

 <div class="window"></div>

Answer 2

另一种方法是通过clip-path CSS 属性，其中剪辑路径用于定义绿色“覆盖”的可见区域。

使用Clippy工具，您可以修改“框架”剪辑路径（来自工具预设库）以满足您的需要。 这是一个示例，说明如何使用该技术来实现您所需要的，以及剪辑路径的每个坐标对应的内容：

 .overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,255,0,0.5); /* Defines the portion of the green overlay to be drawn and clipped */ clip-path: polygon( 0% 0%, 0% 100%, 25% 100%, /* Bottom left sideline of clipped rectangle */ 25% 25%, /* Top left corner of clipped rectangle */ 75% 25%, /* Top right corner of clipped rectangle */ 75% 75%, /* Bottom right corner of clipped rectangle */ 25% 75%, /* Bottom left corner of clipped rectangle */ 25% 100%, /* Bottom left baseline of clipped rectangle */ 100% 100%, 100% 0%); }

 <div class="overlay"></div> <img src="https://images.unsplash.com/photo-1505811210036-052144988918?w=1080" />

然后，您可以根据 JavaScript 的clip-path来概括可见矩形区域的解决方案，如下所示：

 /* Calculates clip paths with rectangular "cutout" for specified element */ const setClipPath = (element, { left, top, width, height }) => { element.style.clipPath = `polygon( 0% 0%, 0% 100%, ${left}% 100%, ${left}% ${top}%, ${left + width}% ${top}%, ${left + width}% ${top + height}%, ${left}% ${top + height}%, ${left}% 100%, 100% 100%, 100% 0%) `; } setClipPath(document.querySelector(".overlay"), { top: 10, left: 10, width: 30, height: 30 });

 .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 255, 0, 0.5); }

 <div class="overlay"></div> <img src="https://images.unsplash.com/photo-1505811210036-052144988918?w=1080" />

Answer 3

使用边框的另一个想法

响应式

 body { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3999/Tilt-Shift_-_Cityscene.jpg); background-size: cover; }.window { position:fixed; top:0; left:0; right:0; bottom:0; border-style:solid; border-width:20vh 30vw; border-color:rgba(0, 255, 0, .25); }

 <div class="window"></div>

或固定尺寸

 body { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3999/Tilt-Shift_-_Cityscene.jpg); background-size: cover; }.window { position:fixed; top:0; left:0; right:0; bottom:0; border-style:solid; border-width:calc(50vh - 80px) calc(50vw - 100px); border-color:rgba(0, 255, 0, .25); }

 <div class="window"></div>

Answer 4

创建一个填充整个屏幕的 div。 透明的window是div的内部，透明的背景是边框。 使用CSS，使用border-width属性控制窗口的position，使用height和width属性设置窗口的大小。

 #overlay { /* full page overlay */ position: fixed; top:0; bottom:0; left:0; right:0; z-index: 2; /* window size */ width: 150px; height: 20px; /* window position */ border-top: 50px; border-left: 50px; border-bottom: 10000px; border-right: 10000px; /* window colour */ background-color: rgba(0,0,0,0); /* frame colour */ border-style: solid; border-color: rgba(50,150,250,0.5); } p { margin: 50px; }

 <html> <body> <p>A paragraph of text</p> <div id="overlay"></div> </body> </html>

使用 css 和 javascript 在 div 背景中创建透明 window

问题描述

4 个解决方案

解决方案1
2 已采纳 2019-10-08 09:03:53

解决方案2
1 2019-10-08 09:12:53

解决方案3
1 2019-10-08 09:16:39

解决方案4
1 2019-10-08 09:24:09

使用 css 和 javascript 在 div 背景中创建透明 window

问题描述

4 个解决方案

解决方案1 2 已采纳 2019-10-08 09:03:53

解决方案2 1 2019-10-08 09:12:53

解决方案3 1 2019-10-08 09:16:39

解决方案4 1 2019-10-08 09:24:09

解决方案1
2 已采纳 2019-10-08 09:03:53

解决方案2
1 2019-10-08 09:12:53

解决方案3
1 2019-10-08 09:16:39

解决方案4
1 2019-10-08 09:24:09