我已经从圆上创建了一个线段,但是当我尝试对其应用背景图像时,它将其应用到整个圆上,从而导致图像居中于用户看不见的下方。
现在,由于,仅显示了与矩形重叠的圆的一部分overflow: hidden
,我现在暂时禁用hidden
,以显示如何实际渲染图像。
有人可以告诉我如何将背景图像仅应用于可见的圆圈部分吗?
演示:https://codesandbox.io/s/segment-background-image-msu63
^我通过对图像的位置进行硬编码实现了这一点,但是我正在寻找一种面向CSS的方法,因为它会更加动态。
编辑:所以我能够弄清楚。诀窍是放在半圆的顶部的另一个DIV和上添加图像,并设置overflow
到hidden
父DIV。它就像一个魅力!
ps演示已使用解决方案进行了更新。
诀窍是在半圆的顶部放置另一个div并在其上添加图像,并将溢出设置为隐藏在父div上。它就像一个魅力!
ps演示已使用解决方案进行了更新。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句