我已经搜索了 2 天，阅读了剪辑、剪辑路径、 mask 以及有关此 CSS 主题的所有信息。 但我无法弄清楚如何实现以下目标:
我有一个红色的 body 背景颜色。 在此之上是一个全宽、全高的 div，它是白色的。 (红色主体未显示)。 我想从白色的 div 中剪出一个形状，以显示一点红色背景。
有谁知道如何做到这一点？
非常感谢!
谢谢
马里奥。
fiddle :https://jsfiddle.net/ecaw94vw/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<!--<div class="svgMask" width="0" height="0">
<svg>
<defs>
<mask id="svgmask2">
<image width="100%" height="100%" xlink:href="assets/images/masks/triangle-1-mask.svg"/>
</mask>
</defs>
<image mask="url(#svgmask2)" width="100%" height="100%" y="0" x="0" xlink:href="https://dl.dropboxusercontent.com/u/32494584/backdrop.jpg"/>
</svg>
</div>-->
<div class="mask">
</div>
</div>
</body>
</html>
CSS
body{
background:red;
}
.mask{
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
background: white;
-webkit-clip-path: polygon(100px 100px, 200px 0px, 500px 500px);
}
谢谢
最佳答案
好的，我想我在这里找到了适合您需求的解决方案!
.clip-text {
font-size: 6em;
font-weight: bold;
line-height: 1;
position: relative;
display: inline-block;
margin: .25em;
padding: .5em .75em;
text-align: center;
/* Color fallback */
color: #fff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.clip-text:before,
.clip-text:after {
position: absolute;
content: '';
}
.clip-text:before {
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: inherit;
}
.clip-text:after {
position: absolute;
z-index: -1;
top: .125em;
right: .125em;
bottom: .125em;
left: .125em;
background-color: #000;
}
.clip-text--no-textzone:before {
background-position: -.65em 0;
}
.clip-text--no-textzone:after {
content: none;
}
.clip-text--cover,
.clip-text--cover:before {
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
.clip-text_one {
background-image: url(http://lorempixel.com/480/200/abstract/7);
}<div class="clip-text clip-text_one">THIS IS CUT OUT</div>关于html - 如何从html元素中剪切出一个形状，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38784642/