【发布时间】：2020-05-19 01:24:45
【问题描述】：
我已经从一个圆圈创建了一个片段，但是当我尝试将背景图像应用到它时，它会将它应用到整个圆圈，导致图像居中于用户看不到的地方下方。
现在，由于overflow: hidden，仅显示与矩形重叠的圆圈部分，我现在刚刚禁用了hidden，以显示图像的实际渲染方式。
谁能告诉我如何仅将背景图片应用到圆圈的可见部分？
演示：https://codesandbox.io/s/segment-background-image-msu63
^ 我通过硬编码图像的位置来实现这一点，但我正在寻找一种面向 CSS 的方法，因为它会更加动态。
编辑：所以我能够弄清楚。诀窍是在半圆顶部放置另一个 div 并在其上添加图像，并将父 div 上的 overflow 设置为 hidden。它就像一个魅力！
p.s 演示已使用解决方案进行了更新。
【问题讨论】：
-
圆圈的哪个部分应该可见？你能进一步解释一下你想要发生的事情吗？
-
更新了问题。
-
你能把心脏变成另一个 div 并使用 z-index 来分层而不是采用这种方法吗？这样做会更容易折腾那颗心。
-
这似乎是个好方法。你能详细说明一下吗？
标签： javascript html css styles