Run!

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>

이제 원하는 결과를 얻을 수 있다.

<style>

.comm_file {position:relative;background:url('btn_attachSch.png') no-repeat right center; }

.comm_file .inp_file_btn {display:block;position:absolute;top:0;right:0;width:58px;height:22px;opacity:0;filter:alpha(opacity=0); }

.comm_file .inp_file_txt {float:left; border:1px solid #bbb;background:none;}

.clfix:after{content:".";display:block;height:0px;clear:both;visibility:hidden; }

</style>

<div class="comm_file clfix" style="width:575px;">

<input type="file" id="attach" name="attach" class="inp_file_btn" onchange="document.getElementById('b_f_name_imsi').value=this.value;">

<input type="text" id="b_f_name_imsi" name="b_f_name_imsi" class="inp_file_txt" style="width:495px">

</div>