CSS에서 이미지의 밝기를 조절하려면 filter 속성과 함께 brightness(%) 함수를 사용하면 됩니다. 이때 밝기 값에 따라 결과가 달라지는데, 각 값의 의미는 다음과 같습니다.
- 0%: 이미지가 완전히 검은색으로 표시됩니다.
- 100%: 원본 이미지 그대로 유지되며, 기본값입니다.
- 100% 초과: 설정한 값만큼 이미지가 더 밝아집니다.
예를 들어 brightness(150%)로 설정하면 원본보다 50% 더 밝은 이미지가 출력됩니다.
예제 코드
실제로 CSS3의 brightness 필터를 적용한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(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%)에 의해 원본보다 약간 더 밝게 나타납니다.
정리
CSS3의 filter: brightness() 함수를 활용하면 별도의 이미지 편집 없이도 웹페이지에서 이미지 밝기를 손쉽게 조절할 수 있습니다. 마우스 오버 시 이미지를 밝게 하는 등 다양한 인터랙션 효과와 함께 활용하면 더욱 유용합니다.