CSS3 - 通过`div`的透明文本？答案

【问题标题】：CSS3 - Transparent text through `div`?CSS3 - 通过`div`的透明文本？
【发布时间】：2014-05-27 15:10:08
【问题描述】：

我正在寻找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;
}

【问题讨论】：

HTML/CSS: "See Through Background" Text? 的可能副本
在 Firefox 上没有运气，但在 chrome 中工作 css-tricks.com/examples/ImageUnderText
@Mr.Alien 我实际上将它与我的问题相关联。我试过了，但无法让它工作。这就是这个问题的意义
@Claudio 我链接的问题是不同的，有两个要使用的属性，您使用的是单个属性
哦，对不起。没仔细看。

标签： css

【解决方案1】：

更好的方法是使用两张图片。

背景图片和上面有空心文字的图片。

您可以使用-webkit-text-fill-color: transparent; 实现相同的效果，但这仅适用于支持-webkit 的浏览器。

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

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

我们应该始终倾向于支持跨浏览器兼容性的设计和开发。

【讨论】：

这个小提琴不是你的 - stackoverflow.com/questions/18523557/… 如果是同一个问题，考虑将问题标记为重复
是的，我用那个小提琴只是为了演示一个比较。下次会考虑标记。谢谢@BoltClock

【解决方案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;
}

【讨论】：

这个小提琴不是你的 - stackoverflow.com/questions/18523557/… 如果是同一个问题，考虑将问题标记为重复