CSS 크로스 브라우저 투명도란?
현대 웹 개발에서 opacity 속성은 요소의 투명도를 조절하는 가장 표준적이고 권장되는 방법입니다. 이 속성은 Firefox 0.9 이상, Safari 2 이상, Opera 9 이상, Internet Explorer 9 이상, 그리고 모든 버전의 Chrome에서 정상적으로 작동합니다.
하지만 구형 브라우저까지 완벽하게 지원하려면 브라우저별로 제공되던 대체(fallback) 속성들을 함께 선언해야 합니다.
- -moz-opacity: Firefox 0.9 미만 구버전을 위한 투명도 속성입니다.
- -khtml-opacity: 초기 Safari 1.x 버전을 위한 투명도 속성입니다.
- filter: alpha(opacity=...): IE 5~9에서 투명도와 유사한 효과를 구현하기 위한 필터 속성입니다.
이 값들을 모두 함께 작성하면 최신 브라우저는 표준 opacity 속성을 우선 적용하고, 구형 브라우저는 자신이 이해할 수 있는 대체 속성을 사용하기 때문에 어떤 환경에서도 일관된 투명도 효과를 얻을 수 있습니다.
크로스 브라우저 투명도 예제 코드
<!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>Cross browser opacity</h1>
<img src="https://i.picsum.photos/id/605/800/800.jpg" />
<img class="transparent" src="https://i.picsum.photos/id/605/800/800.jpg" />
<h3>두 번째 이미지는 모든 브라우저에서 투명하게 표시됩니다</h3>
</body>
</html>실행 결과
위 코드를 실행하면 동일한 이미지 두 장이 나란히 출력되며, .transparent 클래스가 적용된 두 번째 이미지는 불투명도 30%로 설정되어 첫 번째 이미지보다 훨씬 흐리게 보입니다. filter, -moz-opacity, -khtml-opacity, opacity 네 가지 속성이 모두 선언되어 있기 때문에 IE 5부터 최신 Chrome, Firefox, Safari, Opera까지 어떤 브라우저에서 열어도 동일한 투명 효과가 적용됩니다.