CSS saturate() 함수

정의와 사용법

CSS의 saturate() 필터 함수는 요소의 충실도（색 강도）를 조정합니다.

  • 0%（또는 0）은 요소가 완전히 충실하지 않게 합니다
  • 100%（또는 1）는 효과가 없습니다
  • 200%（또는 2）는 요소가 과잉 충실하게 합니다

예제

예제 1

이미지에 다른 충실도를 설정하면:

#img1 {
  filter: saturate(0);
}
#img2 {
  filter: saturate(100%);
}
#img3 {
  filter: saturate(200%);
}

직접 시험해 보세요

예제 2

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

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

직접 시험해 보세요

CSS 문법

saturate(amount)
값 설명
amount

선택 사항입니다. 충실도 값을 숫자나 백분율로 지정할 수 있습니다.

0%（또는 0）은 요소가 완전히 충실하지 않게 합니다.

100%（또는 1）는 효과가 없음을 나타냅니다.

100% 이상의 값은 과잉 충실 효과를 제공합니다.

기술 세부 사항

버전： CSS Filter Effects Module Level 1

브라우저 지원

표中的 숫자는 이 함수를 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

相关页面

참조:CSS 필터 속성

참조:CSS blur() 함수

참조:CSS brightness() 함수

참조:CSS contrast() 함수

참조:CSS drop-shadow() 함수

참조:CSS grayscale() 함수

참조:CSS hue-rotate() 함수

참조:CSS invert() 함수

참조:CSS 오페라시티() 함수

참조:CSS 세피아() 함수