Css 从div背景中排除多个矩形
我有一个应用程序，我需要“突出”两个独立的矩形区域，用半透明的背景覆盖所有其他区域 经过一些研究，我认为css剪辑/屏蔽可以在这里使用。但似乎这些都在解决反问题（即显示覆盖着面具的部分，而隐藏其余部分）。我需要的是从背景Css 从div背景中排除多个矩形,css,mask,clip-path,Css,Mask,Clip Path,我有一个应用程序，我需要“突出”两个独立的矩形区域，用半透明的背景覆盖所有其他区域 经过一些研究，我认为css剪辑/屏蔽可以在这里使用。但似乎这些都在解决反问题（即显示覆盖着面具的部分，而隐藏其余部分）。我需要的是从背景div元素中减去2个独立的区域。有点像剪掉了 下图大致显示了我试图实现的目标： p、 美国 我想这也可以通过在一个屏蔽svg中有多个矩形来实现，这些矩形将形成这种外部背景形状。但在此之前，我想也许有更好的办法。因为这个解决方案需要认真思考：） 编辑： 对，我尝试了建议的解决方
div对，我尝试了建议的解决方案（我的方案被认为是重复的）。在我的案例中，它不起作用，我需要所有这些动态发生，并且是跨浏览器的。我发现，
mask composite.highlighter背景{
排名：0；
左：0；
宽度：100vw；
高度：100vh；
位置：固定；
z指数：10000；
指针事件：无；
不透明度：0；
过渡：不透明度0.2s缓进缓出；
}
.高亮背景.背景矩形{
宽度：100vw；
高度：100vh；
填充：rgba（0,0,0,0.55）；
}
.highlighter-background.active{
不透明度：1；
}在对面具进行了更多的研究之后，我发现了一种非常简洁、简单的实现方法。这种方法的好处是，您可以简单地操纵svg属性来更改高亮显示的矩形的位置和/或添加/删除任意数量的矩形。它还具有良好的浏览器支持，因为它使用内联svg掩码 所以，这里的想法是，默认模式下的遮罩基本上会隐藏遮罩对象，其中遮罩的像素是黑色的，并显示这些像素是白色的（类似于Photoshop遮罩）。中间的一切都是半透明的 在这里，我的目标是显示除2个（或更多）区域外的所有背景。这是通过以下步骤实现的：
.highlighter背景{
排名：0；
左：0；
宽度：100vw；
高度：100vh；
位置：固定；
z指数：10000；
指针事件：无；
不透明度：0；
过渡：不透明度0.2s缓进缓出；
}
.高亮背景.背景矩形{
宽度：100vw；
高度：100vh；
填充：rgba（0,0,0,0.55）；
}
.highlighter-background.active{
不透明度：1；
}