在 CSS 中裁剪图像的中心答案

【问题标题】：Clipping the center of an image in CSS在 CSS 中裁剪图像的中心
【发布时间】：2020-03-07 20:35:04
【问题描述】：

我正在尝试在全屏视频前面放置一个半透明叠加层并作为拍照的目标。

我试图剪掉的部分在这张图片中显示为白色：https://ibb.co/cK6xb8

clip-path 可以裁剪图像的外部，但如何裁剪内部？

【问题讨论】：

也许这会有所帮助。 jordanhollinger.com/2014/01/29/…
??您希望图像仅显示在白色部分还是仅显示在外部？否则 mix-blend-mode 可能是内部或外部作品的替代方案，您需要使用文本作为蒙版 codepen.io/gc-nomade/pen/rWrvKP 的蒙版演示（它与使用的颜色有关）

标签： css mask clip-path

【解决方案1】：

您可以使用clip-path 中的多边形来执行此操作。查看Clippy 并选择框架选项作为示例。

-webkit-clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);

【讨论】：