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

问题描述

我正在尝试创建本质上与 CSS 剪辑路径相反的内容.使用 clip-path 时，图像或 div 会被剪裁，以便仅保留您指定的形状，而背景的其余部分将被有效删除.

我希望这样，如果我剪辑一个形状，它基本上会在最上层打一个洞并移除形状，而不是背景.这可能吗?我也愿意接受 SVG 解决方案，但我是 SVG 的新手，所以请善待:)

基本上，在下面的代码中，我有一个绝对位于红色方块内的蓝色方块，并希望能够从蓝色方块中冲压出一个形状，以便下面的红色层显示该形状曾经所在的位置.实际上会有一个图像作为背景层，所以我不能接受模仿我想要的但实际上并没有打出形状的伪效果.

任何帮助都会很棒！

codepen:https://codepen.io/emilychews/pen/GQmyqx

body {宽度:100%；高度:100vh；填充:0；边距:0；显示:弹性；}#盒子 {保证金:自动；位置:相对；宽度:33%；高度:200px；背景:红色；}#内盒 {宽度:100%；高度:100%；背景:蓝色；顶部:0；左:0；位置:绝对；}

<div id="innerbox"></div>

解决方案

您可以将图像上方蓝色部分，然后在其上应用 clip-path结果将与您在蓝色部分内创建一个孔以查看图像下方一样:

body {宽度:100%；高度:100vh；填充:0；边距:0；显示:弹性；}#盒子 {保证金:自动；位置:相对；宽度:33%；高度:200px；背景:蓝色；}#内盒 {宽度:100%；高度:100%；背景:网址(https://lorempixel.com/400/400/)中心/封面；顶部:0；左:0；位置:绝对；z-索引:1；剪辑路径:多边形(10% 10%、10% 90%、90% 50%)；}

<div id="innerbox"></div>

另一个想法是考虑多个背景，您将获得比剪辑路径更好的支持，并且代码更少:

body {高度:100vh；边距:0；显示:弹性；}#盒子 {保证金:自动；位置:相对；宽度:33%；高度:200px；背景:线性渐变(到右下角，透明 49%，蓝色 50%)底部/100% 60%，线性渐变(到右上角，透明 49%，蓝色 50%)顶部/100% 60%，线性渐变(蓝色，蓝色)左/20% 100%，网址(https://lorempixel.com/400/400/)中心/封面；背景重复:不重复；}

更新

如果你想要一些不透明度，这里有一个想法，你必须使用 clip-path 复制内容(一个缺点):

body {宽度:100%；高度:100vh；填充:0；边距:0；显示:弹性；}#盒子 {保证金:自动；位置:相对；宽度:33%；高度:200px；背景:蓝色；}#innerbox,#innerbox-2 {宽度:100%；高度:100%；背景:网址(https://lorempixel.com/400/400/)中心/封面；顶部:0；左:0；位置:绝对；z-索引:2；}#内盒 {/* 如果你最初计划有 x opacity 所以你需要在这里设置 1-x */不透明度:0.4；}#innerbox-2 {z-索引:1；剪辑路径:多边形(10% 10%、10% 90%、90% 50%)；动画:动画 5s 线性交替无限；}@keyframes 动画 {从 {剪辑路径:多边形(10% 10%、10% 90%、90% 50%)；}到 {剪辑路径:多边形(20% 50%、90% 50%、80% 10%)；}}

<div id="innerbox"><h1>标题</h1><p>一些内容</p>
<div id="innerbox-2"><h1>标题</h1><p>一些内容</p>