javascript - CSS,将内圈剪辑到图像
问题描述
我正在尝试在具有圆形底部的图像上使用“剪辑路径”。我尝试使用 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>
解决方案
我会这样做:我会使用 SVG 元素。clipPathclipPathUnits="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 报价
推荐阅读
- apache-camel - 对 bean 绑定骆驼使用类型限定符
- c - scanf("%c",&x) 和 x=getchar() 有区别吗?
- java - service.schedule() 方法是否会阻止其他线程运行?
- android - WebView:如何使用默认浏览器加载特定链接
- python - Python 在三元条件运算符中使用 print() 函数?
- angular - 使用 Angular 2 和 Flask 进行用户身份验证
- java - 有没有办法验证 spring-data-rest 存储库方法上的方法参数?
- reactjs - 我如何更改反应表按钮样式
- python - 谷歌合作没有找到 Python 包
- python - 使用字典创建邻接矩阵,其中字母值在python中转换为数字