ओपेसिटी फ़ंक्शन
opacity फ़ंक्शन
बैकग्राउंड इमेज की पारदर्शिता बदलने की अनुमति देता है।
100% या 1 मान
इमेज को उसकी मूल पारदर्शिता पर छोड़ देता है।
0 मान दर्शाता है,
कि इमेज पूरी तरह से पारदर्शी हो जाएगी।
इस सीमा में स्थित कोई भी संख्या
बैकग्राउंड की आंशिक पारदर्शिता निर्धारित करती है।
नकारात्मक मान निर्धारित नहीं किया जा सकता है।
डिफ़ॉल्ट मान 1 है।
सिंटैक्स
सिलेक्टर {
filter: opacity(संख्या);
}
उदाहरण
आइए हम अपनी इमेज की पारदर्शिता
50% पर सेट करें:
<div id="elem"></div>
#elem {
filter: opacity(50%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
उदाहरण
और अब आइए पारदर्शिता
100% पर सेट करें:
<div id="elem"></div>
#elem {
filter: opacity(100%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
उदाहरण
और अब आइए
opacity फ़ंक्शन में मान
0 के बराबर सेट करें:
<div id="elem"></div>
#elem {
filter: opacity(0);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
यह भी देखें
-
blurफ़ंक्शन,
जो बैकग्राउंड को ब्लर करता है -
brightnessफ़ंक्शन,
जो बैकग्राउंड की चमक सेट करता है -
contrastफ़ंक्शन,
जो बैकग्राउंड का कॉन्ट्रास्ट सेट करता है -
drop-shadowफ़ंक्शन,
जो बैकग्राउंड को शैडो देता है -
hue-rotateफ़ंक्शन,
जो बैकग्राउंड का ह्यू रोटेशन सेट करता है -
invertफ़ंक्शन,
जो बैकग्राउंड के रंगों को इनवर्ट करता है -
sepiaफ़ंक्शन,
जो बैकग्राउंड को सेपिया में बदलता है -
backgroundप्रॉपर्टी,
जो बैकग्राउंड के लिए एक शॉर्टहैंड प्रॉपर्टी है -
background-imageप्रॉपर्टी,
जिसकी मदद से ब्लॉक को बैकग्राउंड इमेज दी जा सकती है
