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 報價