CSS로 이미지 불투명도 설정하기
웹 페이지에서 이미지를 반투명하게 처리하려면 CSS의 -moz-opacity 속성을 사용할 수 있습니다. 이 속성은 모질라(Mozilla) 기반 브라우저에서 투명한 이미지를 만들 때 사용됩니다. 반면 인터넷 익스플로러(IE)에서는 filter:alpha(opacity=x) 필터를 이용해 이미지의 투명도를 조절합니다.
다만 두 속성은 모두 오래된(레거시) 방식이라는 점에 유의해야 합니다. 현재는 W3C 표준으로 채택된 opacity 속성을 사용하는 것이 가장 좋습니다. opacity 값은 0.0(완전히 투명)부터 1.0(완전히 불투명) 사이로 지정하며, 크롬·파이어폭스·사파리·엣지 등 모든 최신 브라우저에서 일관되게 동작합니다.
예제 코드
아래 코드를 실행하면 이미지에 테두리 스타일을 적용하고 CSS로 투명도를 설정할 수 있습니다:
<html>
<head>
</head>
<body>
<img style = "border:1px solid red;-moz-opacity:0.2;filter:alpha(opacity=50);"
src = "https://www.tutorialspoint.com/assets/videotutorials/courses/css_online_training/380_course_215_image.jpg" />
</body>
</html>
표준 opacity 속성을 사용한 최신 방식
구형 브라우저 호환성이 필요하지 않다면 아래와 같이 표준 opacity 속성 하나만으로 간단하게 처리하는 것을 권장합니다:
<img style="opacity:0.5;" src="image.jpg" alt="샘플 이미지">
위 예제에서는 이미지가 50% 불투명 상태, 즉 반쯤 투명하게 표시됩니다. 마우스를 올렸을 때만 선명해지는 효과 등 다양한 UI 연출에도 활용할 수 있습니다.