我正在尝试在网页中实现效果。网页必须完全被带有透明窗口的背景覆盖(该窗口基本上会突出显示页面的某些页面以吸引用户的注意力)。
窗口的大小事先是未知的,效果必须在前端实现。所以我可以自由地使用html、css和js。
我不知道如何仅使用 css 来实现这种效果。而且我不能使用像 png 图像背景这样的东西,因为透明窗口的大小和尺寸会动态变化。我正在考虑生成画布并将其用作 div 元素的背景图像。
是否可以根据我的示例图像生成画布并将其用作背景?
您能举个例子吗?
谢谢。
使用巨人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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)