CSS를 활용하면 이미지의 크기, 테두리, 투명도 등 다양한 스타일을 손쉽게 지정할 수 있습니다. 대표적인 속성으로는 width, height, -moz-opacity, filter 등이 있으며, 이 중 투명도 조절은 이미지에 시각적 효과를 주는 가장 기본적인 기법입니다.
-moz-opacity 속성이란?
-moz-opacity 속성은 모질라(Mozilla) 브라우저에서 이미지의 불투명도(opacity)를 설정할 때 사용되던 속성입니다. 값은 0.0(완전히 투명)부터 1.0(완전히 불투명) 사이로 지정합니다.
반면 인터넷 익스플로러(IE)에서는 filter:alpha(opacity=x) 형식을 사용해 투명 이미지를 만들었습니다. 여기서 x 값은 0~100 사이의 숫자로, 값이 작을수록 더 투명해집니다.
참고:-moz-opacity와filter:alpha()는 구형 브라우저 전용 속성입니다. 최신 브라우저에서는 W3C 표준인opacity속성을 사용하는 것이 좋습니다.
예제 코드
아래 코드를 실행하면 빨간색 테두리가 있는 이미지에 투명도를 적용한 결과를 확인할 수 있습니다.
<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 속성을 사용하는 것입니다.
img {
border: 1px solid red;
opacity: 0.5; /* 50% 투명 */
}이처럼 CSS의 투명도 관련 속성을 활용하면 별도의 이미지 편집 없이도 웹 페이지에서 원하는 시각 효과를 간단히 구현할 수 있습니다.