html - 如何在css中夹入一个盒子？

Question

我有一张多种颜色的背景图片。标题是一个白框，我需要在这个框上写文字。所以通过这个框会发生什么，文本被剪裁，背景通过这个白框被看到。如何做到这一点？

Answer 1

你可以用 background clip: text 做到这一点，但你只支持 webkit

CSS

body {
    height: 100%;
    background: linear-gradient(0deg, red,white, blue, pink, yellow, green);
}

h3 {
    background-image: inherit;  
    -webkit-background-clip: text;
    color: transparent;
    font-size: 80px;
    top: 0px;
    position: relative;
    margin-top: 0px;
    padding: 0px;
}

h3:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: white;
    z-index: -1;
}

fiddle