div에 background-image를 지정하고 opacity로 투명도를 주면 그 div에 들어가는 text들까지도 투명도가 먹는다
예를 들어 다음과 같은 소스를 줬을 때
<style> .wrappe{ width:512px; height:380px; background-image: url('images/desert.jpg') ; background-repeat:no-repeat; background-position:center; background-origin:content-box; background-size: 100%; opacity: 0.3!important; filter:alpha(opacity=30); } </style> <div class="wrapper"> <h3 class="title">Invitation</h3> <div class="detail"></div> </div>
다음과 같은 결과가 나온다.
invitation이라는 글자마저 투명하게 나와버린것!
물론 내가 원하는건 이게 아니다.
사막 사진만 투명하게 나와야한다면? 다음과 같이 바꿔보자.
<style> .wrapper { z-index:1; position:relative; width:512px; height:380px; border:1px solid; border-radius:5px; } .wrapper:after{ width:512px; height:380px; z-index:-1; position:absolute; top:0; left:0; content:""; background-image: url('images/desert.jpg') ; background-repeat:no-repeat; background-position:center; background-origin:content-box; background-size: 100%; opacity: 0.3!important; filter:alpha(opacity=30); } .title{color:#000000;font-weight:bold;font-size:20px;} </style> <div class="wrapper"> <h3 class="title">Invitation</h3> <div class="detail"></div> </div>
이제 원하는 결과를 얻을 수 있다.
