"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > सामग्री को धुंधला किए बिना सीएसएस में पृष्ठभूमि छवि को धुंधला कैसे करें?

सामग्री को धुंधला किए बिना सीएसएस में पृष्ठभूमि छवि को धुंधला कैसे करें?

2024-11-08 को प्रकाशित
ब्राउज़ करें:180

How to Blur a Background Image in CSS Without Blurring the Content?

सामग्री की स्पष्टता बनाए रखते हुए पृष्ठभूमि छवि पर सीएसएस धुंधलापन

सीएसएस सेटिंग में पृष्ठभूमि छवि को धुंधला करने के प्रयास में, इसका सामना करना आम बात है वह समस्या जहां सामग्री (पाठ या अन्य तत्व) भी धुंधली हो जाती है। यहीं पर जेड-इंडेक्स और छद्म तत्वों की अवधारणा चलन में आती है।

सामग्री को प्रभावित किए बिना पृष्ठभूमि छवि को धुंधला करने के लिए, निम्नलिखित दृष्टिकोण को नियोजित किया जा सकता है:

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

इस दृष्टिकोण को लागू करके, आप अपनी सामग्री की स्पष्टता को बनाए रखते हुए पृष्ठभूमि छवि को प्रभावी ढंग से धुंधला कर सकते हैं, जिससे आकर्षक वेबसाइट डिजाइन तैयार हो सकते हैं।
            
नवीनतम ट्यूटोरियल अधिक>

चीनी भाषा का अध्ययन करें

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3