创建一个反向剪辑路径 - CSS或SVG
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了创建一个反向剪辑路径 - CSS或SVG相关的知识，希望对你有一定的参考价值。
我试图创建一个实质上与CSS剪辑路径相反的东西。使用剪辑路径时，会剪切图像或div，以便仅保留指定的形状，并有效删除背景的其余部分。
我想这样，如果我剪一个形状，它基本上在最上面的一层打孔，并删除形状，而不是背景。这可能吗？我也对SVG解决方案持开放态度，但我是SVG的新手，所以要善待:)
基本上，在下面的代码中，我有一个蓝色正方形绝对位于红色正方形内，并希望能够从蓝色正方形中打出一个形状，因此下面的红色图层显示了原来的形状。实际上会有一个图像作为背景图层，因此我无法接受模仿我想要的伪效果，但实际上并没有打出形状。
任何帮助都会很棒！
codepen：https://codepen.io/emilychews/pen/GQmyqx
body
width: 100%;
height: 100vh;
padding: 0; margin: 0;
display: flex;
#box
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: red;
#innerbox
width: 100%;
height: 100%;
background: blue;
top: 0;
left: 0;
position: absolute;
<div id="box">
<div id="innerbox"></div>
</div>答案
您可以将图像放在蓝色部分上方并在其上应用clip-path，然后结果将与在蓝色部分内创建孔以查看下图所示相同：
body
width: 100%;
height: 100vh;
padding: 0; margin: 0;
display: flex;
#box
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: blue;
#innerbox
width: 100%;
height: 100%;
background: url(https://lorempixel.com/400/400/) center/cover;
top: 0;
left: 0;
position: absolute;
z-index:1;
clip-path:polygon(10% 10%, 10% 90%, 90% 50%);
<div id="box">
<div id="innerbox"></div>
</div>另一答案
这在谷歌排名很高，答案没有解决我的问题b / c我无法触摸我的背景图像所以这是另一种方式：
使用剪辑路径创建框架。
body
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
display: grid;
place-items: center;
#clip,
#background
width: 400px;
height: 400px;
#clip
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
position: absolute;
background: #fff;
opacity: 0.8;
#background
background: url(https://lorempixel.com/400/400/) center/cover;
z-index: -1;
<div id="background">
<div id="clip"></div>
</div>以上是关于创建一个反向剪辑路径 - CSS或SVG的主要内容，如果未能解决你的问题，请参考以下文章
为啥带有 SVG 的 CSS 剪辑路径在 Safari 中不起作用？
当引用为 css 剪辑路径属性时，SVG 剪辑路径的位置不正确