ओपेसिटी फ़ंक्शन

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

सिंटैक्स

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

उदाहरण

आइए हम अपनी इमेज की पारदर्शिता 50% पर सेट करें:

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

css#elem {
  filter: opacity(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: opacity(100%);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

उदाहरण

और अब आइए opacity फ़ंक्शन में मान 0 के बराबर सेट करें:

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

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

Результат:

यह भी देखें