투명 gif, png 이미지를 배경에 입혀서 투명 처리를 한 경험이 있을것이다.
하지만, IE6~7 브라우저 사용률 저하와 필요이상으로 사용되었던 이미지 보다 CSS 활용도가 높아짐에 따라 CSS background의 rgba를 활용한 투명 처리와 IE 크로스브라우징 하는 방법을 소개하겠습니다.

CSS

    
    body { background: #96C653; }
    p { padding: 10px;background: #000; color: #fff; }
    div { margin: 5px 0; padding: 10px; height: 200px; color: #fff; }
    #rgba { 
      background: rgba(0, 0, 0, 0.5); 
      /* 
        IE8이하는 rgba가 동작하지 않기 때문에 배경 투명도 적용을 위해 filter의 gradient을 대체 이용한다. 
        컬러값 60000000의 8자리 숫자의 의미: 앞 60 불투명도, 나머지 6자리 컬러값.
        startColorstr와 endColorstr의 색을 같게 하여 배경 투명도 처리를 하는것.
        하지만 원래는 그라데이션 처리하는 기법이기 때문에 같은 60% 투명도라고 해도 약간의 차이는 있다.
      */
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60000000,endColorstr=#60000000);
      zoom: 1; /* 일반적이진 않지만 ie6, 7 에서 적용 안되는경우 선언. */
    }
    #opacity { background: #000; opacity: 0.5; filter: alpha(opacity=50); }

HTML

  
DOM element의 투명도를 결정하는 opacity, 배경의 투명도를 결정하는 background rgba.
  

    [background 투명 처리]

    background: rgba(0, 0, 0, 0.5);


    [IE8 이하 배경만 투명도 처리]

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60000000,endColorstr=#60000000);
  
  

    [DOM element 투명 처리]

    opacity: 50%


    [IE8 이하 opacity 처리]

    filter: alpha(opacity=50);
  

[참고]
– jsbin 소스보기
– 참고 가이드
– Generate 제공

[별참 – GradientType은 그라데이션 방향]
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#4cffffff’, endColorstr=’#4cffffff’);