用CSS覆盖的洞

如何才能在覆盖层上创建一个洞，让您可以看到实际的网站

#地下{
背景色：#725；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
}
#覆盖层{
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
溢出：隐藏；
}
#覆盖层#中心{
宽度：400px；
高度：200px；
背景色：#ABD；
位置：绝对位置；
最高：50%；
左：50%；
利润上限：-100px；
左边距：-200px；
边界宽度：100%；
边框颜色：#FFF；
边框样式：实心；
}

---

否。这在大多数浏览器中都不可能

CSS掩蔽

如果您只对新浏览器感兴趣，可以使用

屏蔽
：
规格：

兼容性：

边框/轮廓

如果要创建模拟效果并将其颜色设置为透明，则还可以使用
边框
或
轮廓
css属性，使其看起来像模拟的

绝对位置

您还可以使用位置：

<div z-index:20></div>
<div z-index:10>
    <div z-index:30> // top div is over child of this one
</div>


//最上面的那个是这个孩子

透明度和要素





--这不是你想要的，但它可以帮助你：）
这是不可能的。
但是无论如何，你可以做边界技巧：
#overlay
本身是透明的，但是边界不是。看小提琴：
这在一定程度上是可能的

选项1：带半透明边框的覆盖元素

body，html{
身高：100%；
宽度：100%；
填充：0；
保证金：0；
背景：蓝色；
}
#覆盖层{
身高：100%；
宽度：100%；
位置：固定；
边框：50px实心rgba（255255.3）；
框大小：边框框；
排名：0；
左：0；
}

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容content content content content content content内容
现在，您可以通过在新的webkit浏览器中使用相对良好的支持来实现这一点css剪辑（有关兼容性，请参阅）

例如，下面的代码将在元素的中心切割一个半径为100px（所以200px宽）的孔（带有一个略微羽化的边）

这里有一个示例。
是的，这种效果是可能的。

我会使用css框阴影，它的扩散半径非常大

box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);


.hole{
位置：绝对位置；
顶部：20px；
左：20px；
宽度：200px；
高度：150像素；
盒影：0.9999px rgba（0,0,255,0.2）；
}
Lorem ipsum dolor sit amet，Ocurrete tincidunt Physologia，位于乌兰科佩尔邮政学院。我是一个封建的人，同时也是一个概念性的人。全方位的灵柩，永远的。两人一组，一组高声喊叫，一组高声喊叫

他曾是一位杰出的哲学家。销售人员id eos，eam ne blandit adipisci。Ei eam ipsum异议。我是阿库萨姆·多洛雷斯医生

多亏了CSS，现在甚至可以钻取叠加的任何内容及其背景图像/背景过滤器，甚至指针事件

为此，我们需要定义一条路径，该路径由覆盖所有视口的第一个矩形和表示孔的内部形状组成。由于
奇偶填充规则，实际上只有我们的内部形状才是剪裁区域的一部分

使用
path（）
绘制任何形状都应该很容易，但不幸的是，只有Firefox支持
clip path
，因此我们必须使用
polygon（）
函数，这意味着我们必须将每个点定义为向量

虽然对于一个简单的方孔仍然可读：


.hole{
位置：固定；
宽度：100vw；
高度：100vh；
顶部：0px；
左：0px；
--矩形尺寸：75px；
剪辑路径：多边形（偶数，
/*外直肌*/
0 0，/*左上角*/
100%0，/*右上角*/
100%100%，/*右下角*/
0%100%，/*左下角*/
0、/*和左上角*/
/*对内部rect执行相同的操作*/
计算（50%-var（-rect大小）/2）计算（50%-var（-rect大小）/2），
计算（50%+var（-rect大小）/2）计算（50%-var（-rect大小）/2），
计算（50%+var（-rect大小）/2）计算（50%+var（-rect大小）/2），
计算（50%-var（-rect大小）/2）计算（50%-var（-rect大小）/2），
计算（50%变量（--rect大小）/2）计算（50%变量（--rect大小）/2）
);
/*你能克服这一切吗*/
背景色：rgba（10161232,0.3）；
背景图片：url(https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png);
背景尺寸：40px；
-webkit背景滤镜：模糊（3倍）；
背景滤镜：模糊（3px）；
显示器：flex；
证明内容：中心；
}
.洞>p{
自对准：居中；
字号：18px；
字体大小：粗体；
}
.hole文本{
字体大小：100px；
}
正文{颜色：黑色；}
Lorem ipsum dolor sit amet，Ocurrete tincidunt Physologia，位于乌兰科佩尔邮政学院。我是一个封建的人，同时也是一个概念性的人。全方位的灵柩，永远的。奥特姆·多洛尔广告二重唱
卢西利乌斯·特库姆（lucilius te cum），我们是一对年轻人

他曾是一位杰出的哲学家。销售人员id eos，eam ne blandit adipisci。Ei eam ipsum异议。我是阿库萨姆·多洛雷斯医生

他发现了一个洞
box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);