85 of 313 menu

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 속성,
    배경에 스타일을 설정합니다
한국어
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақКыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
우리는 웹사이트 운영, 분석 및 개인화를 위해 쿠키를 사용합니다. 데이터 처리는 개인정보 처리방침에 따라 이루어집니다.
모두 수락 설정 거부