hue-rotate 함수
hue-rotate 함수는
색상환에서 색상을 회전시켜
배경 이미지의 색조를
변경할 수 있게 합니다. 속성 값은 색상환의 각도를 나타내는 도(degree) 단위로 지정됩니다. 0 또는 360 값은
이미지가 변경되지 않음을 의미하며, 이 범위 내의 다른 숫자는 배경의 색조가 변경됩니다.
기본값은 0deg입니다.
구문
선택자 {
filter: hue-rotate(각도);
}
예제
우리 이미지의 색조를
150deg로 설정해 봅시다:
<div id="elem"></div>
#elem {
filter: hue-rotate(150deg);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
예제
이제 이미지 색조를
50deg로 설정해 봅시다:
<div id="elem"></div>
#elem {
filter: hue-rotate(50deg);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
예제
hue-rotate 속성에 값을
지정하지 않아 봅시다:
<div id="elem"></div>
#elem {
filter: hue-rotate();
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
함께 보기
-
blur함수,
배경을 흐리게 합니다 -
brightness함수,
배경의 밝기를 설정합니다 -
contrast함수,
배경의 대비를 설정합니다 -
drop-shadow함수,
배경에 그림자를 설정합니다 -
invert함수,
배경 색상을 반전시킵니다 -
opacity함수,
배경의 투명도를 설정합니다 -
sepia함수,
배경을 세피아 톤으로 변환합니다 -
background속성,
배경을 위한 단축 속성입니다 -
background-image속성,
블록에 배경 이미지를 설정하는 데 사용됩니다 -
filter속성,
배경에 스타일을 설정합니다