CSS hue-rotate() 함수

정의와 사용법

CSS의 hue-rotate() 필터 함수는 요소에 색상 회전을 적용합니다.

인스턴스

예제 1

이미지에 다른 색상 회전을 설정합니다:

#img1 {
  filter: hue-rotate(200deg);
}
#img2 {
  filter: hue-rotate(90deg);
}
#img3 {
  filter: hue-rotate(-90deg);
}

직접 테스트해 보세요

예제 2

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

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: hue-rotate(90deg);
  backdrop-filter: hue-rotate(90deg);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

직접 테스트해 보세요

CSS 문법

hue-rotate(angle)
값 설명
angle

선택 사항입니다. 입력 샘플 톤의 상대 변화를 나타내는 각도를 지정합니다.

양수는 톤 값을 증가시키고, 음수는 톤 값을 감소시킵니다.

0deg은 원본 이미지(효과 없음)을 나타냅니다.

기본 값은 0입니다.

기술 세부 사항

버전： CSS Filter Effects Module Level 1

브라우저 지원

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

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

관련 페이지

참조:CSS 필터 속성

참조:CSS blur() 함수

참조:CSS brightness() 함수

참조:CSS contrast() 함수

참조:CSS drop-shadow() 함수

참조:CSS grayscale() 함수

참조:CSS invert() 함수

참조:CSS opacity() 함수

참조:CSS saturate() 함수

참조:CSS sepia() 함수