hue-rotate 함수

hue-rotate 함수는 색상환에서 색상을 회전시켜 배경 이미지의 색조를 변경할 수 있게 합니다. 속성 값은 색상환의 각도를 나타내는 도(degree) 단위로 지정됩니다. 0 또는 360 값은 이미지가 변경되지 않음을 의미하며, 이 범위 내의 다른 숫자는 배경의 색조가 변경됩니다. 기본값은 0deg입니다.

구문

css선택자 {
  filter: hue-rotate(각도);
}

예제

우리 이미지의 색조를 150deg로 설정해 봅시다:

html<div id="elem"></div>

css#elem {
  filter: hue-rotate(150deg);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

예제

이제 이미지 색조를 50deg로 설정해 봅시다:

html<div id="elem"></div>

css#elem {
  filter: hue-rotate(50deg);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

예제

hue-rotate 속성에 값을 지정하지 않아 봅시다:

html<div id="elem"></div>

css#elem {
  filter: hue-rotate();
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

함께 보기