CSS अविकलितता / पारदर्शिता
- पिछला पृष्ठ CSS प्रत्यायात पदार्थ
- अगला पृष्ठ CSS नेविगेशन बार
अवधारणा गुण एलिमेंट की अविकलितता/पारदर्शिता निर्दिष्ट करता है।
पारदर्शी इमेज
अवधारणा इस गुण का मान 0.0 से 1.0 के बीच होता है। मान कम होने के साथ-साथ अविकलितता बढ़ती है:
opacity 0.2
opacity 0.5
अवधारणा 1
उदाहरण
img {
अवधारणा: 0.5;
}
पारदर्शी होवर इफेक्ट
अवधारणा सामान्यतया :hover चयनकर्ता के साथ संयोजन करके, इस प्रकार माउस होवर पर अविकलितता को बदला जा सकता है:
उदाहरण
img {
अवधारणा: 0.5;
}
img:hover {
opacity: 1.0;
}
उदाहरण व्याख्या
पहला CSS ब्लॉक उदाहरण 1 में के कोड के समान है। इसके अलावा, हमने उस पर क्या जब उपयोगकर्ता का माउस एक इमेज पर लगाया जाए तब के इफेक्ट जोड़ा है। इस स्थिति में, जब उपयोगकर्ता का माउस इमेज पर लगाया जाए तब हम चाहते हैं कि इमेज अविकलित हो। इस CSS का अवधारणा:1;。
जब माउस के सूचकक चित्र से बाहर निकला तो, चित्र को फिर से पारदर्शी कर दिया जाएगा。
प्रतिक्रियात्मक स्थिति का उदाहरण:
उदाहरण
img:hover {
अवधारणा: 0.5;
}
पारदर्शी फ़ेक्स
का उपयोग करके अवधारणा एलिमेंट के पृष्ठभूमि रंग को अवधारणा लगाते हैं तो, उसके सभी उप-एलिमेंट्स उसी अवधारणा को अवधारण करते हैं।यह पूरी तरह से पारदर्शी एलिमेंट के भीतर के लेख को पढ़ना मुश्किल कर सकता है:
उदाहरण
div {
अवधारणा: 0.3;
}
RGBA के अवधारणा का उपयोग
यदि आप उप-एलिमेंटों पर अवधारणा लगाना नहीं चाहते, जैसे ऊपरी उदाहरण, RGBA रंग-मान का उपयोग करें।नीचे के उदाहरण में पृष्ठभूमि रंग को सेट करते हैं, न कि लेख की अवधारणा:
आपने हमारे CSS रंग इस चयन में RGB को रंग-मान के रूप में उपयोग किया जाता है।RGB के अलावा, RGB रंग-मान को alpha चैनल (RGBA) के साथ उपयोग किया जा सकता है - यह चैनल रंग की अवधारणा को निर्धारित करता है。
RGBA रंग-मान निर्दिष्ट किया जाता है: rgba(लाल, श्यामगुलाबी, नीला, अल्फा) अल्फा प्रायामिक एकांक 0.0 (पूरी तरह से पारदर्शी) और 1.0 (पूरी तरह से अवधारणीय) के बीच के संख्या हैं।
सूचना:आप हमारे CSS रंग इस चयन में RGBA रंग के बारे में अधिक जानकारी सीखा गई है。
उदाहरण
div {
पृष्ठभूमि-रंग: rgba(76, 175, 80, 0.3) /* 30% अवधारणा वाला हरा पृष्ठभूमि */
}
पारदर्शी फ़ेक्स में की लेख
यह कुछ पारदर्शी फ़ेक्स में स्थित लेख है。
उदाहरण
<html>
<head>
<style>
div.background {
पृष्ठभूमि: url(klematis.jpg) repeat;
सीमा: 2px सिद्धांत श्वेतरंग;
}
div.transbox {
मार्ग: 30px;
पृष्ठभूमि-रंग: #ffffff;
सीमा: 1px सिद्धांत श्वेतरंग;
अवधारणा: 0.6;
}
div.transbox p {
मार्ग: 5%;
font-weight: bold;
रंग: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>यह एक पारदर्शी बॉक्स में स्थित टेक्स्ट है。</p>
</div>
</div>
</body>
</html>
उदाहरण व्याख्या
पहले, हम एक बैकग्राउंड इमेज और बॉर्डर वाला <div> एलीमेंट (class="background") बना देते हैं。
तब, हम पहले <div> में एक और <div> (class="transbox") बना देते हैं。
<div class="transbox"> बैकग्राउंड कोलर और बॉर्डर है - यह div पारदर्शी है。
पारदर्शी <div> के अंदर, हम <p> एलीमेंट में कुछ टेक्स्ट जोड़ दिये हैं。
- पिछला पृष्ठ CSS प्रत्यायात पदार्थ
- अगला पृष्ठ CSS नेविगेशन बार
