CSS，将内圈剪辑到图像

Question

我试图在带有圆形底部的图像上使用“剪辑路径”。 我尝试使用 svg 剪辑路径，但它是一个外圆，我不知道是否是最好的方法，因为剪辑是外部的而不是内部的，您建议如何实现这一点？

我想达到这个 ->

这是我尝试制作的代码笔：

 .section-test { padding: 25px 0; background-image: url(https://res.cloudinary.com/ddioeulgw/image/upload/v1548437500/test/hero.png); background-size: cover; height: 85vh; clip-path: ellipse(85% 100% at 50% 0%); }

 <section class="section-test"> </section>

https://codepen.io/kenmarquez-the-typescripter/pen/ombege

我想达到这个 ->

Answer 1

这就是我的做法：我将使用 SVG 元素。 clipPath 具有clipPathUnits="objectBoundingBox"并且路径具有 0 到 1 之间的所有值。

 svg{position:absolute} .section-test { padding: 25px 0; background-image: url(https://res.cloudinary.com/ddioeulgw/image/upload/v1548437500/test/hero.png); background-size: cover; height: 85vh; clip-path: url(#clip); }

 <svg height="0" width="0" > <defs> <clipPath id="clip" clipPathUnits="objectBoundingBox"> <path d="M0,0 L0,.5 A1,1 0 0 1 1,.5 L1,0 0,0" /> </clipPath> </defs> </svg> <section class="section-test"> </section>

我希望它有帮助。

clipPathUnits="objectBoundingBox" ：该值表示元素内的所有坐标都相对于应用剪切路径的元素的边界框。 这意味着坐标系的原点是对象边界框的左上角，对象边界框的宽度和高度被认为具有 1 个单位值的长度。

MDN 报价