invert फ़ंक्शन

invert फ़ंक्शन बैकग्राउंड इमेज के रंगों को उलटने की अनुमति देता है। 0 मान दर्शाता है, कि इमेज मूल रूप में रहती है। 100% या 1 मान बैकग्राउंड के रंगों को पूरी तरह से उलट देता है। इस सीमा में स्थित कोई भी नंबर आंशिक रूप से रंगों को उलटता है। नकारात्मक मान निर्धारित नहीं किया जा सकता। डिफ़ॉल्ट रूप से मान 0 के बराबर होता है।

सिंटैक्स

cssसिलेक्टर {
  filter: invert(संख्या);
}

उदाहरण

आइए हम अपनी इमेज के रंगों को 50% मान तक उलट दें:

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

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

Результат:

उदाहरण

और अब आइए हम अपनी इमेज के रंगों को 100% मान तक उलट दें:

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

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

Результат:

उदाहरण

और अब आइए हम invert फ़ंक्शन में 0 के बराबर मान निर्धारित करें:

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

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

Результат:

यह भी देखें