CSS-图像隐藏在溢出区域中

Question

我已经从一个圆中创建了一个线段，但是当我尝试将其应用于背景图像时，它将其应用于整个圆，从而导致图像居中于用户看不见的某处。

现在，由于overflow: hidden，只有与矩形重叠的圆的部分才显示出来，我现在刚刚禁用了hidden，以显示图像的实际渲染方式。

有人可以告诉我如何将背景图像only应用于可见的圆圈部分吗？

这是我想要的结果：

演示：https://codesandbox.io/s/segment-background-image-msu63

^我通过对图像的位置进行硬编码来实现这一点，但是我正在寻找一种面向CSS的方法，因为它会更加动态。

Answer 1

您可以调整background-position顶部top center：

background: url("./360.v1.png") top center no-repeat rgba(85, 112, 24, 0.76);