Question

我在寻找this 但是当我尝试它时，它将无法工作。

文本是透明的，但不是通过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的浏览器。

看到此 link ，它在chrome中正常工作，因为它支持-webkit，但在firefox中不起作用。

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

我们应该总是喜欢设计和开发支持跨浏览器兼容性。

Answer 2

试试这个link

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

CSS3 - 透过`div`的透明文字？

2 个答案: