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>

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

jQuery 1.7에 와서, .live() 함수는 사용이 중지 되었습니다. 이벤트를 연결하는 것은 .on() 함수로 대체 되었습니다. 하위 버젼의 jQuery에서는 .live() 함수보다는 .delegate() 함수를 사용하기를 권고합니다.

이 함수는 페이지의 document 요소에 이벤트 핸들러 연결을 할 수 있습니다. 페이지에 동적 컨텐츠를 추가하는 쉬운 방법입니다. 더 많은 정보를 얻기를 원하시면 .on() 함수를 참고하시기 바랍니다.

버젼별로 .live() 함수 기능과 같은 기능을 하는 방법은 아래 처럼 쓰여질 수 있습니다. 이 세가지 이벤트 바인드 함수는 모두 같은 효과를 냅니다.

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

출처 : http://findfun.tistory.com/285,  http://api.jquery.com/live/

아래 주소로 접속하여  캐쉬삭제할 주소를 입력하면 된다.

https://developers.facebook.com/tools/debug/