웹 페이지에서 이미지나 요소에 투명도를 적용하려면 브라우저별로 지원하는 속성이 다르다는 점을 이해해야 합니다. 다행히 몇 가지 속성만 함께 사용하면 구형 Internet Explorer 8 이하를 포함한 거의 모든 브라우저에서 동일한 투명 효과를 구현할 수 있습니다.
브라우저별 투명도 속성 정리
- opacity — W3C 표준 속성으로, 가장 현대적이고 권장되는 방법입니다. Firefox 0.9+, Safari 2+, Opera 9+, IE 9+, 그리고 모든 버전의 Google Chrome에서 지원됩니다.
- -moz-opacity — Firefox 0.9 미만의 아주 오래된 버전을 위한 전용 속성입니다.
- -khtml-opacity — 초기 Safari 1.x 버전을 위한 전용 속성입니다.
- filter: alpha(opacity=…) — IE 5부터 IE 9까지에서 투명도 효과를 내기 위해 사용되는 Microsoft 전용 필터 속성입니다. 값은 0~100 사이의 숫자로 지정합니다.
즉, 네 가지 속성을 동시에 선언해 두면 어떤 브라우저로 접속하더라도 일관된 투명도가 적용됩니다.
전체 예제 코드
다음은 모든 브라우저에서 이미지 투명도를 적용하는 CSS 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
img {
width:270px;
height:200px;
}
.transparent{
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
</style>
</head>
<body>
<h1>Opacity example</h1>
<img src="https://i.picsum.photos/id/505/800/800.jpg" >
<img class="transparent" src="https://i.picsum.photos/id/505/800/800.jpg" >
</body>
</html>
코드 설명
.transparent 클래스에는 네 가지 투명도 속성이 모두 선언되어 있습니다. 표준인 opacity: 0.3은 30% 불투명(70% 투명) 상태를 의미하며, 구버전 IE를 위한 filter: alpha(opacity=30) 역시 동일하게 30% 불투명도를 나타냅니다. 값의 단위만 다를 뿐 결과는 같습니다.
실행 결과
위 코드를 실행하면 첫 번째 이미지는 원본 그대로 표시되고, 두 번째 이미지에는 30% 불투명도가 적용되어 배경이 비치는 반투명 효과가 나타납니다.
마무리
요즘은 IE 9 이상과 모던 브라우저만 고려하면 되므로 opacity 속성 하나만 사용해도 충분하지만, 레거시 환경까지 지원해야 하는 프로젝트라면 위 예제처럼 filter, -moz-opacity, -khtml-opacity를 함께 선언해 두는 것이 안전합니다.