不透明度に対するテキストの透明度CSS

Question

おはよう！私はこのようなレイアウトをどのように達成することができますか？ あなたが見ることができるように、背景があり、不透明度を持つ別のコンテナ 次にテキストは透明です。

私の現在の仕事をここで、私はそれで動作するようにしようとしたが、私は失敗しました。私はテキストを背景にクリップするのに使っていましたが、そのように見えるものの、アプローチは間違っています。

マイHTML：

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

ここに私の現在のSASSだ：

.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>

希望を！