पृष्ठभूमि छवि का एक विशिष्ट भाग धुंधला करें

Question

मान लें कि परतों के संदर्भ में मेरी साइट इस तरह व्यवस्थित है।

• पृष्ठभूमि छवि (background-size:cover;) एक अर्द्ध पारदर्शी सफेद पृष्ठभूमि के साथ
• 500 x 500 div।
• div के भीतर सामग्री।

मुझे क्या चाहिए यह है कि div (पृष्ठभूमि छवि पर) के नीचे का क्षेत्र धुंधला होना चाहिए। मेरी समस्या यह है कि विभिन्न स्क्रीन आकारों के साथ, मेरे पास पृष्ठभूमि छवि "पूर्व-धुंधला" नहीं हो सकती है क्योंकि वह div हमेशा पृष्ठभूमि के साथ गठबंधन नहीं किया जाएगा।

तो मेरा सवाल यह है कि क्या संभवतः इस क्षेत्र को परिभाषित करके फ्लाई पर पृष्ठभूमि छवि के एक विशिष्ट हिस्से को धुंधला करना संभव है जैसे कि मैं div के लिए होगा? उदाहरण के लिए position:absolute; top:45% right:0; या मेरा सबसे अच्छा क्रॉस-ब्राउज़र विकल्प क्या है। सीएसएस या अन्य बुद्धिमान, इससे कोई फर्क नहीं पड़ता।

धन्यवाद

---

एक तरफ ध्यान दें मैं पृष्ठभूमि inbetween एक div होने के बारे में सोचा है और पहले से इसके पीछे एक के रूप में एक ही पृष्ठभूमि चित्र div के बारे में बात की, लेकिन सेट पर यह पृष्ठभूमि है अग्रभूमि div से मेल खाने की स्थिति और बस इसे धुंधला करें। किंडा जैसे नेविगेटर में पीएस और बॉक्स जैसे कार्यक्रमों में एक तस्वीर में ज़ूम करने की तरह छवि को दिखाया जा रहा है।

Answer 1

यह तुम क्या करने की कोशिश कर रहे हैं क्या के लिए थोड़ा भारी हो सकता है, लेकिन आप इस्तेमाल कर सकते हैं Blur.js

$('.target').blurjs({ 
    source: 'body', 
    radius: 10, 
}); 

आप की ज़रूरत है: यहाँ यह पूर्णता में है केवल पृष्ठभूमि से अधिक धुंधला करने के लिए, चेकआउट:
https://stackoverflow.com/a/17134789/1947286

Answer 2

आप एक तस्वीर को दूसरे के साथ ओवरले कर सकते हैं (div एस का उपयोग करके) और ओवरले को धुंधला कर सकते हैं।

<div style="position: relative; background: URL(...)"> 

<div style="position: absolute; background: URL(...); 
     top: ...; left: ...; width: ...; height: ...; filter: blur(3px)"> 

अद्यतन: http://css-tricks.com/blurry-background-effect/