CSS에서 이미지의 대비를 조정하려면 filter: contrast(%) 속성을 사용합니다. 이 속성은 매우 직관적이며, 값에 따라 이미지의 명암 차이를 자유롭게 제어할 수 있습니다.
contrast() 값의 의미
각 값이 이미지에 미치는 영향은 다음과 같습니다.
- 0%: 대비가 완전히 제거되어 이미지가 검은색으로 표시됩니다.
- 100%: 원본 이미지 그대로 유지되며, 기본값(default)입니다.
- 100% 초과: 대비가 강화되어 명암 차이가 더 뚜렷한 이미지가 됩니다.
0%와 100% 사이의 값도 자유롭게 지정할 수 있으며, 값이 작을수록 대비가 줄어들어 이미지가 회색빛으로 뿌옇게 보입니다.
예제 코드
아래는 CSS3를 활용해 이미지 밝기와 대비를 동시에 조정하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(120%);
filter: contrast(120%);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<p>아래 이미지는 위의 원본 이미지보다 더 밝고 대비가 강하게 적용된 모습입니다.</p>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>실행 결과
위 코드를 실행하면 demo 클래스가 적용된 두 번째 이미지가 brightness(120%)와 contrast(120%) 필터의 영향으로 원본보다 더 밝고 선명한 대비를 가지게 됩니다.
참고 사항
예제 코드에서 filter 속성이 두 번 선언되어 있는데, 실제로는 마지막에 선언된 contrast(120%)만 적용됩니다. 밝기와 대비를 함께 적용하려면 다음과 같이 하나의 filter 속성에 여러 함수를 나열하는 것이 올바른 방법입니다.
img.demo {
filter: brightness(120%) contrast(120%);
}이처럼 CSS 필터 함수는 공백으로 구분하여 조합할 수 있으며, saturate(), grayscale(), blur() 등 다른 필터와 함께 사용하면 더욱 풍부한 시각 효과를 구현할 수 있습니다.