hue-rotate फ़ंक्शन

hue-rotate फ़ंक्शन रंग चक्र पर ह्यू को घुमाकर बैकग्राउंड इमेज के रंगतत्व को बदलने की अनुमति देता है। संपत्ति के मान डिग्री में निर्दिष्ट किए जाते हैं, जो रंग चक्र के कोण को दर्शाते हैं। मान 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;
}

Результат:

यह भी देखें