पाठ को प्रभावित किए बिना पृष्ठभूमि-रंग के लिए अस्पष्टता

वेब विकास की दुनिया में, दृश्य अपील को बढ़ाने के लिए पारदर्शिता प्राप्त करना अक्सर आवश्यक होता है और वेबसाइट तत्वों की कार्यक्षमता. एक सामान्य आवश्यकता संलग्न पाठ की अस्पष्टता को बनाए रखते हुए div की पृष्ठभूमि में पारदर्शिता लागू करना है। यह एक चुनौती पैदा कर सकता है, विशेष रूप से क्रॉस-ब्राउज़र अनुकूलता सुनिश्चित करने में।

आरजीबीए समाधान

सबसे प्रभावी और व्यापक रूप से समर्थित समाधान 'आरजीबीए' का उपयोग करना है। लाल, हरा, नीला, अल्फा) संपत्ति। यहाँ एक उदाहरण है:

.alpha60 {
  background-color: rgba(0, 0, 0, 0.6);
}

'आरजीबीए' संपत्ति पृष्ठभूमि रंग के साथ-साथ इसके अल्फा चैनल या पारदर्शिता को निर्दिष्ट करती है। इस मामले में, पृष्ठभूमि 60% की अपारदर्शिता के साथ काले रंग में सेट है। यह दृष्टिकोण अधिकांश आधुनिक ब्राउज़रों में काम करेगा। &&&]

.alpha60 { पृष्ठभूमि-रंग: आरजीबी(0, 0, 0); फ़िल्टर:प्रोगिड:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, EndColorstr=#99000000); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, EndColorstr=#99000000)"; }

'आरजीबी' संपत्ति आईई के लिए फ़ॉलबैक पृष्ठभूमि रंग सेट करती है, जबकि 'फ़िल्टर' और '-एमएस-फ़िल्टर' गुण क्रमशः संस्करण 5.5 से 7 और 8 में पारदर्शिता लागू करते हैं।

IE ब्राउज़रों के लिए नोट

.alpha60 {
  background-color: rgb(0, 0, 0);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

पारदर्शिता सुनिश्चित करने के लिए, 'पृष्ठभूमि: पारदर्शी' घोषित करना आवश्यक है IE के लिए CSS फ़ॉलबैक। यह सुनिश्चित करता है कि अल्फ़ा चैनल समर्थन उपलब्ध न होने पर भी पृष्ठभूमि का रंग पारदर्शी बना रहे।