이미지 가져가 오버레이 : 중첩 된 요소의 투명도를 처리

Question

내가 원하는대로 작동하지 않는이 상황이 있습니다

.work-container { 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.overlay-info { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    opacity: 0; 
 
    transition: .5s ease; 
 
    background: #eee; 
 
} 
 

 
.overlay-info:hover { 
 
    opacity: .75; 
 
} 
 

 
.go-to { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
}

<div class="work-container"> 
 
    <img src="http://lorempixel.com/320/240" class="img-responsive"> 
 
    <div class="overlay-info"> 
 
    <div class="go-to"> 
 
     <button type="button" class="btn btn-secondary">Secondary</button> 
 
    </div> 
 
    </div> 
 
</div>

이미지 위에 마우스의 .overlay-info 사업부가 opacity을 얻는다을 .75 (시작은 0)이지만 button은 opacity이 1입니다. 어떤 아이디어?

Answer 1

불투명도 대신 rgba를 사용해야합니다. 불투명도를 사용하면 불투명도를 설정하는 요소의 하위가 상속됩니다.