【发布时间】：2022-01-22 14:02:21
【问题描述】：
我有一个红色背景的 div 和一个 50% border-radius，其中包含一个具有透明度的圆形 PNG 图像。红色正在“流血”越过图像的边界，这是我不想要的。请参阅下面的屏幕截图。
我已尝试调整图像的内边距和宽度。
有没有办法防止父 div 的背景超出所包含图像的边缘？
我已经在此处重现了该问题（请注意粉红色圆圈上方出现的蓝色）：https://codepen.io/ScribbleScratch/pen/LYzjRYN
【问题讨论】：
-
能否请您附上代码 sn-p 以便其他人可以复制？
-
在 codepen 中复制——参见 OP 中的链接
-
当我在 Photoshop 中并排比较两者时，我看到的是圆形图像不完全是 350px。它在 y 轴上看起来是 349px。你能确认是不是这样吗？
-
您选择不使用 css clip-path 遮盖您的图像有什么原因吗？那么您就不需要将您的图像创建为一个圆圈。
-
我没有考虑过使用剪辑路径，但似乎这可能是要走的路。