CSS의 opacity 속성은 현대적인 표준 솔루션으로, Firefox 0.9 이상, Safari 2 이상, Opera 9 이상, IE 9 이상, 그리고 모든 버전의 Chrome에서 정상적으로 작동합니다.
하지만 구형 브라우저까지 완벽하게 지원하려면 아래와 같은 대체(폴백) 속성들을 함께 사용해야 합니다.
- -moz-opacity: Firefox 0.9 미만 구버전을 위한 불투명도 속성
- -khtml-opacity: Safari 1.x 초기 버전을 위한 불투명도 속성
- filter: alpha(opacity=...): IE 5~9에서 불투명도와 유사한 효과를 구현하기 위한 필터 속성
최신 opacity 속성과 함께 이 값들을 폴백(fallback)으로 조합해 사용하면, 어떤 브라우저에서도 일관된 불투명도 효과를 적용할 수 있습니다.
예제 코드
다음은 모든 브라우저에서 작동하는 이미지 불투명도 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>모든 브라우저를 위한 불투명도</h1>
<img src="https://i.picsum.photos/id/305/800/800.jpg" />
<img class="transparent" src="https://i.picsum.photos/id/305/800/800.jpg" />
<h3>위의 두 번째 이미지는 모든 브라우저에서 불투명하게 표시됩니다</h3>
</body>
</html>실행 결과
위 코드를 실행하면 두 개의 동일한 이미지가 나타나며, .transparent 클래스가 적용된 두 번째 이미지는 30% 수준으로 흐리게 표시됩니다. 구형 IE부터 최신 Chrome까지 어떤 환경에서도 동일한 불투명도 효과를 확인할 수 있습니다.
