Fatal编程技术网
  • javascript/
  • Javascript CSS-图像隐藏在溢出区域中

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

javascript html css

Javascript CSS-图像隐藏在溢出区域中,javascript,html,css,styles,Javascript,Html,Css,Styles,我已经从一个圆中创建了一个片段，但是当我尝试将背景图像应用到它时，它会将其应用到整个圆中，从而导致图像居中，位于用户看不到的地方 现在，由于overflow:hidden，只有与矩形重叠的圆部分才会显示，我刚刚禁用了hidden，以显示图像的实际渲染方式 有人能告诉我，我如何才能将背景图像仅应用于可见的圆圈部分 这就是我想要的结果： 演示： ^我通过硬编码图像的位置实现了这一点，但我正在寻找一种面向CSS的方法，因为这将更加动态 编辑：所以我能弄明白。诀窍是在半圆顶部放置另一个div，并在其

我已经从一个圆中创建了一个片段，但是当我尝试将背景图像应用到它时，它会将其应用到整个圆中，从而导致图像居中，位于用户看不到的地方

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

有人能告诉我，我如何才能将背景图像仅应用于可见的圆圈部分

这就是我想要的结果：

演示：

^我通过硬编码图像的位置实现了这一点，但我正在寻找一种面向CSS的方法，因为这将更加动态

编辑：所以我能弄明白。诀窍是在半圆顶部放置另一个div，并在其上添加图像，然后将父div上的
溢出设置为
隐藏。它就像一个符咒


p、 s演示将使用解决方案进行更新
 您可以调整
背景位置
顶部
顶部中心
：


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



诀窍是将另一个div放在半圆的顶部，并在上面添加图像，然后将溢出设置为隐藏在父div上。它就像一个符咒


p、 s演示将使用解决方案进行更新。
圆圈的哪一部分应可见？你能进一步解释一下你想发生什么吗？更新了问题。你能把心脏做成另一个div，用z-index来分层吗？这样做会容易得多，这似乎是个好方法。你能详细说明一下吗？这种方法只适用于提供的图像。我正在寻找一种更具活力的方法。