불투명도 이상의 텍스트 투명도 CSS

Question

좋은 하루! 이러한 레이아웃을 어떻게 달성 할 수 있습니까? 백그라운드에서 볼 수 있듯이 불투명도가있는 다른 컨테이너 다음 텍스트는 투명합니다.

나는 그 작업을 시도하지만 난 여기에 내 현재 작업에 실패했습니다. 나는 배경에 텍스트를 자르곤했지만, 그 모습은 틀렸지 만 접근법이 잘못되었습니다.

내 HTML :

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

} 

여러분의 도움에 감사드립니다 :

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

여기 내 현재 말대꾸입니다. 나는 그것을 기꺼이 고맙게 생각할 것이고 그것은 교훈으로 나에게 도움이 될 것이다.

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>

희망을!