不透明度的文本透明度CSS

Question

美好的一天！我想问一下我该如何实现这种布局？ 正如你可以看到有一个背景，然后另一个不透明的容器 然后文本是透明的。

我想上班就可以了，但我失败了，在这里我目前的工作。我曾经把文本剪辑到背景，看起来像是什么，但方法是错误的。

我的HTML：

<div class="container-fluid" id="landing-sec"> 
    <div class="container-fluid sec_about" > 
     <h1>stack overflow</h1> 
    </div> 
</div> 

这里是我当前的青菜：

.sec_about 
{ 
    margin-top: 80px; 
    background-color:white; 
    height:450px; 
    opacity: 0.65; 
    filter: alpha(opacity=65); /* For IE8 and earlier */ 
    h1 
    { 
    background: url('../img/bg1.jpg') no-repeat; 

    // text-rendering: optimizeLegibility; 
    text-transform: uppercase; 
    font-size: 65px; 
    font-weight: bold; 
    font-family: $roboto_bold; 
    text-align: center; 
    z-index: 2; 
    white-space: nowrap; 
    margin-top: 30px; 
    -webkit-text-fill-color: transparent; 
    -webkit-background-clip: text; 
    } 

} 

谢谢您的帮助。我会很乐意欣赏它，它将成为我的教训。

Answer 1

您必须为此使用background-clip。勾选此Codepen

或者看看下面的代码片段：

.sec_about { 
 
    position: relative; 
 
} 
 

 
.clip-text { 
 
    background-image: url(http://lorempixel.com/480/200/abstract/7); 
 
    font-size: 60px; 
 
    font-weight: 700; 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
} 
 

 
.clip-text:before, 
 
.clip-text:after { 
 
    position: absolute; 
 
    content: ''; 
 
} 
 

 
.clip-text:before { 
 
    z-index: -2; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-image: inherit; 
 
} 
 

 
.clip-text:after { 
 
    position: absolute; 
 
    z-index: -1; 
 
    top: .125em; 
 
    right: .125em; 
 
    bottom: .125em; 
 
    left: .125em; 
 
    background-color: #000; 
 
}

<div class="container-fluid" id="landing-sec"> 
 
    <div class="container-fluid sec_about" > 
 
     <div class="clip-text">stack overflow</div> 
 
    </div> 
 
</div>

希望这有助于！