gpt4 book ai didi

javascript - 使用 css 和 javascript 在 div 背景中创建一个透明窗口

转载 作者:太空宇宙 更新时间:2023-11-03 20:25:02 26 4
gpt4 key购买 nike

我正在尝试在网页中实现效果。网页必须完全覆盖有透明窗口的背景(该窗口基本上会突出显示页面的某些页面以引起用户的注意)。窗口的大小事先是未知的,效果必须在前端实现。所以我可以自由使用 html、css 和 js。

visualisation

我不知道有什么方法可以只用 css 来实现这种效果。而且我不能使用类似 png 图像背景的东西,因为透明窗口的大小和尺寸会动态变化。我正在考虑为 div 元素生成 Canvas 并将其用作背景图像。

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

最佳答案

使用巨大的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>

关于javascript - 使用 css 和 javascript 在 div 背景中创建一个透明窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58283119/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com