सामग्री की स्पष्टता बनाए रखते हुए पृष्ठभूमि छवि पर सीएसएस धुंधलापन
सीएसएस सेटिंग में पृष्ठभूमि छवि को धुंधला करने के प्रयास में, इसका सामना करना आम बात है वह समस्या जहां सामग्री (पाठ या अन्य तत्व) भी धुंधली हो जाती है। यहीं पर जेड-इंडेक्स और छद्म तत्वों की अवधारणा चलन में आती है।
सामग्री को प्रभावित किए बिना पृष्ठभूमि छवि को धुंधला करने के लिए, निम्नलिखित दृष्टिकोण को नियोजित किया जा सकता है:
- पृष्ठभूमि के लिए एक कंटेनर बनाना: पृष्ठभूमि छवि को एक डिव या अन्य कंटेनर के भीतर संलग्न करें और इसे एक वर्ग निर्दिष्ट करें, जैसे "ब्लर-बीजीइमेज।"
- एक छद्म तत्व का परिचय: "ब्लर-बीजीइमेज" वर्ग के भीतर, :before जैसा एक छद्म वर्ग जोड़ें। यह कंटेनर के पीछे एक परत बनाता है जो पृष्ठभूमि छवि को प्राप्त करता है।
- पृष्ठभूमि को धुंधला करना: सीएसएस फिल्टर का उपयोग करके छद्म तत्व पर धुंधला प्रभाव लागू करें। यह सामग्री को प्रभावित किए बिना विरासत में मिली पृष्ठभूमि छवि को धुंधला कर देगा। , z-index: 1) धुंधली पृष्ठभूमि (z-index: 0) की तुलना में।
- नीचे एक उदाहरण कोड है:
.blur-bgimage {
ओवर फलो हिडेन;
मार्जिन: 0;
पाठ-संरेखण: बाएँ;
}
.धुंधला-bgimage:पहले {
सामग्री: "";
स्थिति: निरपेक्ष;
चौड़ाई: 100%;
ऊंचाई: 100%;
पृष्ठभूमि: विरासत;
z-सूचकांक: -1;
फ़िल्टर: धुंधला(10px);
-मोज़-फ़िल्टर: ब्लर(10px);
-वेबकिट-फ़िल्टर: ब्लर(10px);
-ओ-फ़िल्टर: धुंधला(10px);
संक्रमण: सभी 2s रैखिक;
-मोज़-संक्रमण: सभी 2s रैखिक;
-वेबकिट-संक्रमण: सभी 2s रैखिक;
-o-संक्रमण: सभी 2s रैखिक;
}
इस दृष्टिकोण को लागू करके, आप अपनी सामग्री की स्पष्टता को बनाए रखते हुए पृष्ठभूमि छवि को प्रभावी ढंग से धुंधला कर सकते हैं, जिससे आकर्षक वेबसाइट डिजाइन तैयार हो सकते हैं।