CSS Background 투명도 조절 (RGBa, Filter 활용)

자식에게 영향을 주지 않는 배경색상의 투명도만 조절하는 CSS Style 을 구현합니다.

.alpha60 {
    /* 0.6 투명도가 적용 된 색상 적용 */
    background: rgba(0, 0, 0, 0.6);
    /* IE 5.5 - 7 */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

ie에서는 그라디언트 필터를 이용하는 건인데 #99000000 에서 99가 투명도를 나타낸다.
이 숫자를 구하는 방법은

Math.floor(0.6 * 255).toString(16);

위의 소스를 파이어버그 콘솔에서 돌려보자~


참조 :

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

.alpha60 { background: rgba(0, 0, 0, 0.6) !important;
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}