[CSS] opacity(투명도) 적용 및 IE8 이하 브라우저 대응

 

 

 

opacity 속성은 IE8 이하의 브라우저에서 지원하지 않으므로, 크로스 브라우징을 위해 아래와 같이 별도로 투명도를 지정해야 합니다.

 

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 */
filter: alpha(opacity=50); /* IE5~7 */
zoom: 1;
opacity: 0.5;

 

opacity는 0~1의 값을 가지고, 0에 가까울수록 투명해지며 1에 가까울수록 불투명해집니다.

filter는 0~100의 값을 가지고, 역시 0에 가까울수록 투명해집니다.

 

 

 

 

opacity: 0.1 filter: alpha(opacity=10)	opacity: 0.5 filter: alpha(opacity=50)	opacity: 1 filter: alpha(opacity=100)

 

opacity를 배경색에 적용하면 배경 위에 오는 하위 요소들까지 투명하게 만드므로, 배경색만 투명하게 하고 싶다면  background: rgba  속성을 사용할 수 있습니다.

rgba에 대한 설명은 아래 링크를 참조하세요.

 

[CSS] rgba(투명도) 적용 및 IE8 이하 브라우저 대응

[CSS] rgba(투명도) 적용 및 IE8 이하 브라우저 대응