CSS contrast() 함수

정의와 사용법

CSS의 contrast() 필터 함수는 요소의 명확도를 조정하는 데 사용됩니다.

  • 0%는 이미지를 완전히 회색으로 변환합니다
  • 100%（또는 1）는 기본 값으로 원본 이미지를 나타냅니다
  • 100% 이상의 값은 명확도를 증가시킵니다
  • 100% 미만의 값은 명확도를 감소시킵니다

예제

예제 1

이미지의 명확도를 증가시키고 감소시키기

#img1 {
  filter: contrast(150%);
}
#img2 {
  filter: contrast(50%);
}

직접 테스트해 보세요

예제 2

을 사용하여 contrast() 와 backdrop-filter 속성을 결합하여 사용할 수 있습니다：

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

직접 테스트해 보세요

CSS 문법

contrast(amount)
값 설명
amount

선택 사항입니다. 명확도 값을 지정할 수 있으며, 숫자나 백분율로 표현할 수 있습니다.

0%는 요소를 완전히 회색으로 변환합니다.

100%（또는 1）는 기본 값으로 원본 이미지（효과 없음）을 나타냅니다.

100% 이상의 값은 명확도를 증가시키고, 100% 미만의 값은 명확도를 감소시킵니다.

기술 세부 사항

버전： CSS 필터 효과 모듈 레벨 1

브라우저 지원

표에 표시된 숫자는 해당 함수를 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

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

관련 페이지

참조:CSS 필터 속성

참조:CSS blur() 함수

참조:CSS brightness() 함수

참조:CSS drop-shadow() 함수

참조:CSS grayscale() 함수

참조:CSS hue-rotate() 함수

참조:CSS invert() 함수

참조:CSS opacity() 함수

참조:CSS saturate() 함수

참조:CSS sepia() 함수