배경 이미지 단독의 나침반 전환 불투명도

Question

호버에서 50 % 불투명 한 배경 이미지를 만들고 다른 모든 요소를 ​​그대로 페이지에 남기고 싶습니다.

.background { 
    div { 
    @include background(image-url("background.jpg")); 
    padding-bottom: 68.53%; 
    @include transition-property(opacity); 
    @include transition-duration(2s); 
    @include transition-timing-function(ease-in); 
    &:hover { 
     opacity: 0.5; 
    } 
    } 

    #cover { 
    @include background-size(cover); 
    } 
} 

.intro { 
    width: 100%; 
    position: absolute; 
    margin-top: 100px; 
    left: 20%; 
    padding-left: 10px; 
    max-width: 650px; 
} 

h2.intro { 
    font-size: 3.5em; 
} 

을 그리고 여기에 HTML입니다 : 여기 내 SASS입니다

<div class="intro"> 
    <h2 class="intro">Introduction</h2> 
</div> 
<div id="anchor"> 
    <div class="background"> 
    <div id="cover">&nbsp;</div> 
    </div> 
</div> 

는 현재 전환 자체가 아름답게 작동

,하지만 난 불투명도 혼자 배경 이미지에 적용 할 때 그것은 또한, "소개"불투명합니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

이것은 결국 해결되었습니다. SASS :

#intro { 
    div { 
    @include background(image-url("nathanstudio.jpg")); 
    padding-bottom: 68.53%; 
    } 

    #cover { 
    @include background-size(cover); 
    } 

    @include transition-property(opacity); 
    @include transition-duration(2s); 
    @include transition-timing-function(ease-in); 
    &:hover { 
    opacity: 0.5; 
    } 
} 

h2#intro { 
    position: absolute; 
    top: 20%; 
    left: 10%; 
    margin: 0; 
    font-size: 3.5em; 
    text-shadow: 2px 2px 0px #000000; 
} 

그리고 HTML :

<div id="intro"> 
    <div id="cover">&nbsp;</div> 
</div> 
<h2 id="intro">Composer<br>Sound Designer</h2> 

그래서 당신은 당신이 물건의 사업부 년대의 외부를 전환하지 않을 물건을 유지의 문제, 그리고 물건을 배치하여 원하는 곳에 갈 수 있습니다. 지금은 간단히 보입니다.)