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