如何使用 CSS 在两个图像之间创建剪辑路径 [关闭]

Posted

技术标签:

【中文标题】如何使用 CSS 在两个图像之间创建剪辑路径 [关闭]【英文标题】:How to create clip-path between two images using CSS [closed] 【发布时间】:2021-07-16 14:10:49 【问题描述】:

如何使用 CSS 重新创建这个模型?在 Photoshop 中使用图层蒙版很容易创建,但是如何使用 CSS 重新创建呢?

它需要响应,所以我宁愿编码而不是上传图片。

image mock-up

【问题讨论】:

【参考方案1】:

贝塞尔曲线 svg 剪辑路径可能是您所需要的,其中两个 div 的 z-index 比另一个高。这说明了这项技术,最好在图形工具中绘制贝塞尔曲线。

https://codesandbox.io/s/bezier-curve-clip-path-h8x8l?from-embed

您将在顶部覆盖带有剪辑路径的 div,然后为其设置不透明度和颜色以使其发光。

【讨论】:

以上是关于如何使用 CSS 在两个图像之间创建剪辑路径 [关闭]的主要内容,如果未能解决你的问题,请参考以下文章

创建一个反向剪辑路径 - CSS或SVG

创建反向剪辑路径 - CSS 或 SVG

如何使用 CSS 剪辑路径剪辑画布?

CSS,将内圈剪辑到图像

css 钻石图像 - 通过剪辑路径

使用 CSS 剪辑路径时如何圆角