如何使用 css clip 裁剪出透明叠加层的一部分

编程问答 2022-06-02

问题描述

我有一个覆盖整个页面的透明覆盖页面。我想在没有覆盖的情况下显示该页面的一小部分以将焦点指向该部分。这可以用 CSS 来完成吗，也许 clip？我尝试了多个代码，但没有提供我所需要的。

代码笔链接：https://codepen.io/twan2020/pen/abmLVwv

上面的链接显示了我想要的完全相反的内容。现在整个屏幕都是可见的，只有一小部分覆盖层显示。我已尝试将剪辑代码移至 .clipmask 并为其设置透明背景，但这仅显示覆盖整个页面的叠加层。

.clipmask{
  position: absolute;
  clip: rect(10px,190px,10px);
  background-color: transparent;
}

我还在 SO 上找到了答案，使用巨大的框阴影来获得这种效果，但这对我来说更像是一个肮脏的修复。我希望我可以用更简洁的代码来实现这一点。有什么办法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

cliphtmlmask