Question

我一直在寻找2天，阅读剪辑，剪辑路径，屏蔽以及有关此css主题的所有信息。但我无法弄清楚如何实现以下目标：

我的身体背景颜色为红色。在这之上是一个全宽，全高div，这是白色的。（红色的身体没有显示）。我想从白色div中剪出一个形状，以显示一些红色背景。

有谁知道如何做到这一点？

非常感谢！

由于

马里奥。

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);
    }

感谢

Answer 1

好的，我想我已经找到了适合您需求的解决方案！

.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元素中剪切出一个形状

1 个答案: