티스토리 뷰

[HTML5 / CSS3 ] IE 하위버전에서 투명도 처리하는 법

IE는 버전별 렌더링의 차이가 심해 퍼블리셔들이 크로스브라우징을 고려할 때 가장 고민하게 만듭니다. IE의 버전별로 지원이 되는 CSS3의 속성에 차이가 있기 때문에 CSS3 속성을 사용하기 전에 IE 버전별로 지원되는 CSS3 속성에 대해 익혀둘 필요가 있습니다. 



CSS3의 속성 중 가장 자주 사용하게 되는 속성 중 하나가 바로 opacity 속성입니다. 단어 그대로 투명도값을 설정하는 속성인데요. 이 속성은 CSS3속성으로 IE9버전까지만 지원이 되는 속성입니다. 


(www.w3schools.com에서 자신이 사용하고자 하는 속성의 브라우저별 지원 현황을 확인하실 수 있습니다.)



위에서 알 수 있듯이 IE에서 CSS3에서 색상에 투명도를 주기 위해 사용하는 rgba 속성은 IE9 이상에서만 적용되기 때문에 그 이하 버전에서는 rgba 속성이 아닌 다른 방법으로 해결해야 합니다.

하위버전의 IE에서 투명도를 주기 위해 사용할 수 있는 속성으로는 filter의 gradient를 이용하는 방법이 있습니다.


background-color: rgba(255, 0, 255, 0.3);

filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#4dff00ff, endColorStr=#4dff00ff);

-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr=#4dff00ff, endColorStr=#4dff00ff)";


위의 설정에서 "startColorStr"와 "endColorStr"의 값은 헥사값이며, 8자리의 헥사값에서 맨 앞의 두자리가 알파(a)의 헥사값, 나머지 6자리는 rgb의 헥사값이다. #ff00ff -> rgb(255, 0, 255)

위의 예문에서는 "4d"가 rgba()의 "0.3"과 같습니다.


"0"부터 "0.9"에 해당하는 헥사값은 각각 아래와 같습니다.


0 = 00


0.1 = 1a


0.2 = 33


0.3 = 4d


0.4 = 66


0.5 = 80


0.6 = 99


0.7 = b3


0.8 = cc


0.9 = e6



opacity 속성 또한 IE 하위버전에서는 적용이 안되므로 filter: alpha(poacity=원하는 수치값)으로 나타내주면 됩니다.


#opacity {

          background-color: #fff;

          opacity: 0.5;

          filter: alpha(opacity=50);

}


opacity는 0~1 사이의 값을 가지며 filter는 0~100의 값을 가진다. 숫자가 높아질수록 원본에 가깝고, 숫자가 낮아질수록 투명화됩니다.


이렇게 크로스브라우징을 고려할 때, 특히 IE 버전별로 지원되는 CSS3의 속성에 대해 익혀두고, IE하위를 고려해 퍼블리싱을 진행해야 합니다.

Recent Comments