सीएसएस: अनुपलब्ध पृष्ठभूमि-फ़िल्टर के लिए एक विकल्प प्रदान करना

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

समान प्रभाव प्राप्त करने का एक तरीका सूक्ष्म पारदर्शिता के साथ पृष्ठभूमि को नियोजित करना है। नीचे दिया गया सीएसएस कोड इस दृष्टिकोण को प्रदर्शित करता है:

/* Slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}

/* Blurred effect with backdrop support */
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .backdrop-blur {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}

जब बैकड्रॉप-फ़िल्टर समर्थित नहीं है, तो थोड़ा पारदर्शी बैकग्राउंड फ़ॉलबैक के रूप में काम करेगा। जो ब्राउज़र बैकड्रॉप-फ़िल्टर का समर्थन करते हैं, वे धुंधला प्रभाव प्रदर्शित करेंगे। धुंधली छवि]

इस रणनीति को अपनाकर, आप उन ब्राउज़रों में भी तत्वों पर एक आकर्षक फ़िल्टर शामिल कर सकते हैं जिनमें मूल पृष्ठभूमि-फ़िल्टर क्षमताओं का अभाव है।