웹 페이지에서 이미지를 투명하게 처리하고 싶다면 CSS의 투명도(opacity) 속성을 활용하면 됩니다. 예전 브라우저에서는 -moz-opacity 속성을 사용했지만, 현재는 표준화된 opacity 속성을 사용하는 것이 좋습니다.
CSS 투명도 기본 문법
opacity 속성은 0부터 1 사이의 값을 가지며, 값이 작을수록 더 투명해집니다.
- 0: 완전히 투명 (보이지 않음)
- 0.5: 반투명
- 1: 완전히 불투명 (기본값)
예제 코드
아래 코드는 인라인 스타일을 사용하여 이미지에 투명도를 적용하는 방법을 보여줍니다:
<html> <head> </head> <body> <img style = "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 속성 사용하기
위 예제의 -moz-opacity와 filter:alpha()는 구형 브라우저(Firefox 구버전, Internet Explorer)를 위한 것으로, 현재는 지원이 중단되었거나 권장되지 않습니다. 모든 최신 브라우저에서 동작하도록 하려면 다음과 같이 표준 opacity 속성을 사용하세요:
<img style = "opacity:0.5;" src = "image.jpg" />
마우스 오버 시 투명도 변경하기
CSS와 함께 사용하면 마우스를 올렸을 때 이미지가 선명해지는 효과도 쉽게 만들 수 있습니다:
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}이처럼 CSS 투명도 속성을 활용하면 이미지에 다양한 시각적 효과를 손쉽게 적용할 수 있습니다.