如果我正确理解了该问题,则需要在页面上透明覆盖,但其中有一个“孔”以显示一个元素?
这是解决问题的第一步。它在目标元素上使用了一个伪元素,该元素在两侧仅宽10个像素,并在其上延伸了一个透明的框阴影,该阴影遍及整个视口。(100vw应该足够,但如有必要可以做得更大)。第二个嵌入式盒阴影提供了柔和的边缘。
toggleOverlay.addEventListener('click', () => {
foo.classList.toggle('with-overlay');
});
body {
background: antiquewhite;
}
.foo {
padding: 40px;
margin: 100px;
position: relative;
border: solid 1px black;
}
.foo.with-overlay:before {
content: '';
pointer-events: none;
position: absolute;
border-radius: 10px;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
box-shadow: 0 0 0 100vw rgba(1, 1, 1, 0.5), inset 0 0 2px 2px rgba(1, 1, 1, 0.5);
background: transparent;
opacity: 0.8;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="foo" class="foo">
hello world
<button id="toggleOverlay">toggle overlay</div>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句