使用CSS穿透背景

这个问题确实很奇怪，所以让我用一个片段来解释：

.container{
宽度：200px；
高度：200px；
背景：rgba（20020020087）；
}
.别针{
位置：绝对位置；
左：50px；
顶部：20px；
}
.覆盖{
位置：绝对位置；
左：25px；
顶部：40px；
背景：灰色；
边框：1px纯白；
填充：12px；
填充顶部：30px；
}
.覆盖：之前{
内容：''；
位置：绝对位置；
边框：1px纯白；
宽度：48px；
高度：48px；
边界半径：50%；
顶部：-30px；
左：10px；
}

内容

这可以通过使用径向渐变的图像遮罩实现（IE或Edge<18不支持）

.container{
宽度：200px；
高度：200px；
背景：rgba（20020020087）；
}
.别针{
位置：绝对位置；
左：50px；
顶部：20px；
}
.覆盖{
位置：绝对位置；
左：25px；
顶部：40px；
背景：灰色；
边框：1px纯白；
填充：12px；
填充顶部：30px；
}
.覆盖：之前{
内容：''；
位置：绝对位置；
边框：1px纯白；
宽度：48px；
高度：48px；
边界半径：50%；
排名：0；
转化：translateY（-50%）；
}
.蒙面圈{
-webkit掩模图像：径向梯度（50%0%的圆形，透明0，透明25px，黑色25px）；
}

内容

您可以在灰色框阴影之前为：：填充

.overlay

。

.overlay

有

溢出：隐藏这样阴影就留在里面了


.container{
宽度：200px；
高度：200px；
背景：rgba（20020020087）；
}
.pin：：之前{
内容：''；
位置：绝对位置；
边框：1px纯白；
宽度：48px；
高度：48px；
边界半径：50%；
顶部：-10px；
左-12px；
}
.别针{
位置：绝对位置；
左：50px；
顶部：20px；
}
.覆盖{
位置：绝对位置；
左：25px；
顶部：40px；
边框：1px纯白；
边界顶部：无；
填充：12px；
填充顶部：30px；
溢出：隐藏；
z指数：1
}
.覆盖：之前{
内容：''；
位置：绝对位置；
边框：1px纯白；
宽度：48px；
高度：48px；
边界半径：50%；
顶部：-30px；
左：12.3345px；
背景：透明；
框阴影：0 100px灰色；
z指数：-1；
}

内容
<代码> > P>由于覆盖属于元素，可以考虑径向梯度和CSS变量，以便有动态的（没有边界）。
为了简单起见，我移除了图钉，但您可以轻松调整其位置，使其位于圆内，或将其用作叠加元素的背景：


.container{
宽度：200px；
高度：120px；
背景：线性梯度（红色、黄色）；
显示：内联块；
位置：相对位置；
}
.覆盖{
--顶部：-3px；
--左：35px；
--半径：24px；
位置：绝对位置；
左：25px；
顶部：40px；
背景：径向梯度（在变分（-左）变分（-上）的圆圈，透明0，透明变分（-半径），灰色变分（-半径））；
填充：12px；
填充顶部：30px；
}
.覆盖：之前{
内容：''；
位置：绝对位置；
边框：1px纯白；
宽度：计算值（2*var（--半径））；
高度：计算（2*var（--半径））；
边界半径：50%；
顶部：var（--顶部）；
左：var（--左）；
变换：平移（-50%，-50%）；/*以保持相同的原点*/
背景：url（'data:image/svg+xml；utf8'）中心不重复；
}

内容
内容
内容
内容
内容
使圆圈的背景与主要背景相同？@Temaniaff如果我认为我不必陈述明显的。。。大头针在地图上，我希望它是透明的。这合适吗？@Temaniaf如果不合适，如果你增加JSFIDLE上的矩形宽度，你会看到它在圆圈下扩展：我需要它在圆圈的一半解释（视觉上，圆圈的一半应该在内容框中，另一半应该在内容框外）.我明白你的意思，但你需要一个更好的例子。不要像谋杀案一样开始（“真的很奇怪”），而是从渲染你想要的东西开始，地图和所有东西。它将向读者澄清，物体上的白色圆圈似乎穿透了白色背景，这不是一个足够的解决方案。在这种情况下，你可以简单地使用渐变作为背景，而不是遮罩，你将在我的屏幕上有更好的支持，它渲染非常差（所有模糊，如删除图片上的背景）并删除白色圆圈。这正常吗？你并没有真正回答我的问题：我的用例是我在地图上有一个pin（在画布上，所以我不能触摸它）。内容被放置在与pin完全相同的像素上：通过一些CSS，我可以调整它，我想用透明的背景环绕松树。就像圆圈穿过内容框一样。虽然我学到了一些东西，但我不能使用它，因为它是一种不适合我的解决方法，而不是一种解决方案：/@trichetriche在本例中使用真实用例编辑您的问题。我的回答是基于你的问题和你所描述的，而不是基于我没有看到的用例。@trichetriche这里的渐变只是为了说明透明度，它可以是图像或地图，因此gradeint与解决方案无关。你在这里看到什么颜色？圆圈是透明的，像你一样穿过内容元素的背景described@trichetriche编辑你的问题，包括所有这些信息，然后，没有什么说，你不会使用纯色为您的内容，所以我提供了一个解决方案，基于此。对于pin，我只是努力减少总体代码（再次基于问题而不是用例）。你可以很容易地把别针放在外面。检查更新，我已经根据您的要求添加了另一种方法，但同样，它们需要反映在您的que中