opacity & rgba

둘다 CSS3의 기술이고 IE9이하는 지원안함..

opacity는 아시다시피 적용되있는 것의 모든것에게 알파값이 적용된다.

rgba의 경우는 백그라운드만 알파값이 적용된다.

opacity는 filter를 이용해서 opacity 기능을 따라할수있음..

opacity는 0부터 1까지이고

filter의 경우 0부터 100까지 이다.

 background-color:#000
 opacity:.9;
 filter:alpha(opacity=90);

블로그 참고!

http://webdir.tistory.com/60

위 블로그에 나와있던 rgba 방법은 솔직히 번거로워 보이기때문에 눈속임을 이용한 백그라운드 opacity를 주자면..

HTML

 

   
opacity를 이용한 눈속임..
   
  
 

CSS

  .set{position:relative;overflow:hidden;width:250px;height:150px;text-align:center}
  .set p{position:relative;z-index:100;margin-top:55px;color:#fff}
  .set .bg{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:.7;filter: alpha(opacity=70)}

완성된 이미지

확실하게 투명도가 적용된걸 보여주기위해서 일부러 바탕에 초코색뿌려줌..