CSS - 图像隐藏在溢出区域
CSS - Image gets hidden in the overflowed area
我已经从一个圆圈创建了一个片段，但是当我尝试将背景图像应用于它时，它会将它应用于整个圆圈，导致图像在用户看不到的下方某处居中。
现在，由于 overflow: hidden，只显示与矩形重叠的圆圈部分，我暂时禁用 hidden 以显示图像的实际渲染方式.
谁能告诉我如何将背景图片仅应用到可见的圆圈部分？
这是我想要的结果：
演示：https://codesandbox.io/s/segment-background-image-msu63
^ 我通过对图像的位置进行硬编码来实现这一点，但我正在寻找面向 CSS 的方法，因为那样会更加动态。
编辑：所以我能够弄明白。诀窍是在半圆的顶部放置另一个 div 并在其上添加图像，然后将 overflow 设置为 hidden 在父 div 上。它就像一个魅力！
p.s 演示已更新为解决方案。
可以调整background-position顶部top center:
background: url("./360.v1.png") top center no-repeat rgba(85, 112, 24, 0.76);
诀窍是在半圆的顶部放置另一个 div 并在其上添加图像并将溢出设置为隐藏在父 div 上。它就像一个魅力！
p.s 演示已更新为解决方案。
我已经从一个圆圈创建了一个片段，但是当我尝试将背景图像应用于它时，它会将它应用于整个圆圈，导致图像在用户看不到的下方某处居中。
现在，由于 overflow: hidden，只显示与矩形重叠的圆圈部分，我暂时禁用 hidden 以显示图像的实际渲染方式.
谁能告诉我如何将背景图片仅应用到可见的圆圈部分？
这是我想要的结果：
演示：https://codesandbox.io/s/segment-background-image-msu63
^ 我通过对图像的位置进行硬编码来实现这一点，但我正在寻找面向 CSS 的方法，因为那样会更加动态。
编辑：所以我能够弄明白。诀窍是在半圆的顶部放置另一个 div 并在其上添加图像，然后将 overflow 设置为 hidden 在父 div 上。它就像一个魅力！
p.s 演示已更新为解决方案。
可以调整background-position顶部top center:
background: url("./360.v1.png") top center no-repeat rgba(85, 112, 24, 0.76);
诀窍是在半圆的顶部放置另一个 div 并在其上添加图像并将溢出设置为隐藏在父 div 上。它就像一个魅力！
p.s 演示已更新为解决方案。