सीएसएस पृष्ठभूमि
तत्वों के लिए पृष्ठभूमि प्रभाव जोड़ने के लिए CSS पृष्ठभूमि गुणों का उपयोग किया जाता है।
इन अध्यायों में, आप निम्नलिखित सीएसएस पृष्ठभूमि गुणों के बारे में जानेंगे:
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position -
background(आशुलिपि संपत्ति)
सीएसएस पृष्ठभूमि-रंग
गुण किसी तत्व की background-colorपृष्ठभूमि का रंग निर्दिष्ट करता है।
उदाहरण
किसी पृष्ठ की पृष्ठभूमि का रंग इस प्रकार सेट किया गया है:
body {
background-color: lightblue;
}
CSS के साथ, एक रंग सबसे अधिक बार निर्दिष्ट किया जाता है:
- एक मान्य रंग नाम - जैसे "लाल"
- एक HEX मान - जैसे "#ff0000"
- एक आरजीबी मान - जैसे "आरजीबी (255,0,0)"
संभावित रंग मानों की पूरी सूची के लिए CSS Color Values देखें ।
अन्य तत्व
आप किसी भी HTML तत्व के लिए पृष्ठभूमि का रंग सेट कर सकते हैं:
उदाहरण
यहां, <h1>, <p>, और <div> तत्वों की पृष्ठभूमि के रंग अलग-अलग होंगे:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
}
अस्पष्टता / पारदर्शिता
गुण किसी तत्व की opacityअस्पष्टता/पारदर्शिता को निर्दिष्ट करता है। यह 0.0 - 1.0 से मान ले सकता है। कम मूल्य, अधिक पारदर्शी:
अस्पष्टता 1
अस्पष्टता 0.6
अस्पष्टता 0.3
अस्पष्टता 0.1
उदाहरण
div {
background-color: green;
opacity: 0.3;
}
नोट:opacity किसी तत्व की पृष्ठभूमि में पारदर्शिता जोड़ने के लिए संपत्ति का उपयोग करते समय , उसके सभी बाल तत्व समान पारदर्शिता प्राप्त करते हैं। यह पाठ को पूरी तरह से पारदर्शी तत्व के अंदर पढ़ने में कठिन बना सकता है।
आरजीबीए का उपयोग कर पारदर्शिता
यदि आप बाल तत्वों पर अस्पष्टता लागू नहीं करना चाहते हैं, जैसे कि ऊपर हमारे उदाहरण में, RGBA रंग मानों का उपयोग करें। निम्न उदाहरण पृष्ठभूमि रंग के लिए अस्पष्टता सेट करता है न कि टेक्स्ट:
100% अस्पष्टता
60% अस्पष्टता
30% अस्पष्टता
10% अस्पष्टता
आपने हमारे CSS Colors Chapter से सीखा है कि आप RGB को कलर वैल्यू के रूप में उपयोग कर सकते हैं। आरजीबी के अतिरिक्त, आप अल्फा चैनल (आरजीबी ए ) के साथ आरजीबी रंग मान का उपयोग कर सकते हैं - जो रंग के लिए अस्पष्टता निर्दिष्ट करता है।
एक RGBA रंग मान के साथ निर्दिष्ट किया गया है: rgba (लाल, हरा, नीला, अल्फा )। अल्फा पैरामीटर 0.0 (पूरी तरह से पारदर्शी) और 1.0 (पूरी तरह से अपारदर्शी) के बीच की संख्या है ।
युक्ति: आप हमारे CSS Colors Chapter में RGBA Colors के बारे में और जानेंगे ।
उदाहरण
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}