CSS3로 이미지에 불투명도 적용하는 방법
CSS3에서 이미지에 불투명도(opacity) 효과를 주고 싶다면 filter 속성에 opacity() 값을 사용하면 됩니다. opacity 값은 백분율(%)로 지정할 수 있으며, 값이 작을수록 이미지가 더 투명해집니다.
예를 들어 filter: opacity(60%);로 설정하면 원본 대비 60%의 불투명도, 즉 약간 투명한 상태로 이미지가 표시됩니다.
예제 코드
아래 예제는 동일한 이미지 두 개 중 하나에만 불투명도를 적용하여 차이를 비교하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: opacity(60%);
}
</style>
</head>
<body>
<h1>Learn Spring Framework</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Learn Spring Framework</h1>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>코드 설명
위 코드에서 첫 번째 이미지는 아무 스타일 없이 원본 그대로 출력되고, 두 번째 이미지에는 demo 클래스가 적용되어 filter: opacity(60%) 효과가 반영됩니다. 실행 결과를 보면 두 번째 이미지가 첫 번째 이미지보다 더 흐릿하고 투명하게 보이는 것을 확인할 수 있습니다.
실행 결과
참고 사항
불투명도는 opacity 속성으로도 조절할 수 있지만, filter: opacity()를 사용하면 GPU 가속을 활용해 성능 면에서 유리하고, 다른 필터 함수들과 함께 조합해서 사용할 수 있다는 장점이 있습니다. 또한 백분율 외에 0부터 1 사이의 소수 값(예: opacity(0.6))으로도 지정 가능합니다.