CSS，将内圈剪辑到图像

Posted 2023-03-23

【中文标题】CSS，将内圈剪辑到图像

【英文标题】：CSS, Clip inner circle to image

【发布时间】：2019-06-19 14:08:51

【问题描述】：

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

I want to achive this ->

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

.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

I want to achive this ->

【问题讨论】：

哦，该代码只是获取代码笔链接的 hack ..... *** 具有允许您将实际代码粘贴到帖子中并运行它的片段。

我对其进行了编辑，使其具有 html/CSS，因此您不会被 ping 通....

@epascarello 谢谢你知道如何显示我想要实现的横幅图像吗？

***.com/questions/8503636/…

【参考方案1】：

我会这样做：我会使用 SVG 元素。 clipPath 有 clipPathUnits="objectBoundingBox" 并且路径的所有值都在 0 和 1 之间。

svgposition: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   >
    <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 报价