CSS grayscale() 함수

정의와 사용법

CSS의 grayscale() 필터 함수는 이미지를 회색으로 변환합니다。

  • 100%（또는 1）은 이미지가 완전히 회색으로 변합니다
  • 0%（또는 0）는 효과가 없습니다

예제

예제 1

이미지에 다른 회색 값을 설정:

#img1 {
  filter: grayscale(1);
}
#img2 {
  filter: grayscale(60%);
}
#img3 {
  filter: grayscale(0.4);
}

직접 테스트해 보세요

예제 2

을 grayscale() 와 backdrop-filter 속성을 결합하여 사용:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: grayscale(50%);
  backdrop-filter: grayscale(50%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

직접 테스트해 보세요

CSS 문법

grayscale(amount)
값 설명
amount

선택적입니다. 회색 값을 지정할 수 있습니다. 숫자 또는 백분율이 될 수 있습니다。

100%（또는 1）은 요소가 완전히 회색으로 변합니다。

0%（또는 0）는 원래 이미지（효과 없음）을 나타냅니다。

기본 값은 1입니다。

기술 세부 사항

버전： CSS 필터 이펙트 모듈 레벨 1

浏览器支持

표中的数字表示首个完全支持该函数的浏览器版本。

크롬 에지 파이어폭스 사파리 오페라
18 12 35 6 15

관련 페이지

참조:CSS 필터 속성

참조:CSS 블러() 함수

참조:CSS 브라잉트니스() 함수

참조:CSS 컨트раст() 함수

참조:CSS 드롭쉽() 함수

참조:CSS 휘루() 함수

참조:CSS 인버트() 함수

참조:CSS 오픈시티() 함수

참조:CSS saturate() 함수

참조:CSS sepia() 함수