백백 이미지를 만드는 방법

CSS를 사용하여 '흑백' 이미지를 만들어 보는 방법을 배웁니다.

흑백 이미지

CSS를 사용하여 filter 속성은 이미지를 흑백 이미지로 변환합니다.

tulip
원본 이미지
tulip
그레이스케일(100%)

그레이스케일 예제

모든 이미지의 색상을 흑백(100% 회색)으로 변경하세요:

img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

직접 시도해 보세요

관련 페이지

강의:CSS 이미지

참조서:CSS 필터 속성