CSS3 -通过“CSS3”的透明文本？

Question

我在找这。

但当我尝试的时候，它是行不通的。

文本是透明的，但不是通过div，这是一个大的想法。

小提琴

.title1_background {
    background-color: rgba(255, 255, 255, 0.8);
    height: 20%;
    width: 100%;
    position: fixed;
    bottom: 8%;
    margin: 0;
    left: 0;
    text-align: center;
}

.title1_background h1 {
    font-size: 400%;
    display: block;
    -webkit-text-fill-color: transparent;
}

Answer 1

更好的方法是使用两个图像。

背景图像和图像，其上方为中空文本。

您可以使用-webkit-text-fill-color: transparent;实现同样的目标，但这只适用于支持-webkit的浏览器。

请参阅此链接，它在chrome中运行良好，因为它支持-webkit，但不能在firefox中工作。

看见支持-webkit的浏览器及其版本

我们总是倾向于设计和开发支持跨浏览器兼容性的。

Answer 2

试试这个http://jsfiddle.net/j08691/pHCsF/

<div id="outer">
<div id="wrapper">
    <div id="inner">TEXT</div>
</div>

​

CSS

#outer {
width:300px;
height:300px;
background-image: url(http://www.placekitten.com/300/300);
overflow:auto;
 }
#wrapper {
background: #fff;
margin: 100px 0;
opacity:0.6;
}
#inner {
font: bold 60px Arial;
text-align:center;
margin:20px;
background-color: #fff;
background-image: url(http://www.placekitten.com/300/300);
background-position: 280px 201px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#outer:hover{
border:solid 2px #4072B4;
}