CSS3에서 이미지를 회색조(Grayscale)로 변환하려면 filter 속성에 grayscale() 함수를 사용하면 됩니다. 이 외에도 brightness()(밝기)나 contrast()(대비) 함수를 함께 적용하면 원하는 분위기의 흑백 이미지를 손쉽게 만들 수 있습니다.
문법
filter: grayscale(백분율);
grayscale(0%)은 원본 이미지 그대로를 의미하고, grayscale(100%)은 완전한 흑백 이미지로 변환합니다. 100%를 초과하는 값도 지정할 수 있으며, 값이 클수록 회색조 효과가 강하게 적용됩니다.
예제
다음 예제는 동일한 이미지에 밝기, 대비, 회색조 필터를 함께 적용한 모습을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(120%);
filter: contrast(120%);
filter: grayscale(130%);
}
</style>
</head>
<body>
<h1>Spring Framework</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring" width="160" height="150">
<h1>Learn MySQL</h1>
<p>아래 이미지는 위의 원본 이미지보다 더 밝고 대비가 강하며, 회색조 효과까지 적용된 모습입니다:</p>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring" width="160" height="150">
</body>
</html>실행 결과
위 코드를 실행하면 첫 번째 이미지는 원본 그대로 출력되고, 두 번째 이미지에는 demo 클래스가 적용되어 밝기와 대비가 높아진 회색조 이미지가 표시됩니다.
참고 사항
여러 개의 filter 선언 중 마지막 것만 적용됩니다. 여러 효과를 동시에 적용하려면 아래와 같이 하나의 filter 속성에 공백으로 구분하여 작성하는 것이 좋습니다.
img.demo {
filter: brightness(120%) contrast(120%) grayscale(130%);
}