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

三ka

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

在此处输入图片说明

现在,由于,仅显示了与矩形重叠的圆的一部分overflow: hidden,我现在暂时禁用hidden,以显示如何实际渲染图像。

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

这是我想要的结果: 在此处输入图片说明

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

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

编辑:所以我能够弄清楚。诀窍是放在半圆的顶部的另一个DIV和上添加图像,并设置overflowhidden父DIV。它就像一个魅力!

ps演示已使用解决方案进行了更新。

三ka

诀窍是在半圆的顶部放置另一个div并在其上添加图像,并将溢出设置为隐藏在父div上。它就像一个魅力!

ps演示已使用解决方案进行了更新。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章