如何在CSS中的盒子里面剪辑？

Question

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

Answer 1

你可以使用背景剪辑：文本，但你只支持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

Answer 2

只需在框中使用此css代码：

#box_over {background-color:rgba(255,255,255,0.1);}

0.1在哪里有背景不透明度。您可以增加或减少不透明度。

Answer 3

我明白你的意思了！这很简单！你可以用图像做到这一点。

想象一下，有一种背景颜色，你只需将另一个div风格与图像一起放置，其中包含带有see-trough文本的白色背景！使用photoshop;）

另外，请查看此css3如何在一个div中执行多个背景：

#box_over{
    background:url(clipped_text.png), url(background.png);
    background-size:100% 100%;
    background-repeat:no-repeat;
}