सीएसएस: बैकड्रॉप-फ़िल्टर के लिए वर्कअराउंड?

Question

backdrop-filter हाल ही में सीएसएस सुविधा है, जो अभी तक आधुनिक ब्राउज़रों में उपलब्ध नहीं है (कम से कम 1 जुलाई, 2016 तक)।

• क्रोम 51 प्रायोगिक वेब प्लेटफ़ॉर्म ध्वज के माध्यम से backdrop-filter का समर्थन करता है।
• सफारी 9.1 --webkit- उपसर्ग के साथ इसका समर्थन करता है
• फ़ायरफ़ॉक्स 47 कोई समर्थन

इस तरह के एक बेकार राज्य में होने के नाते है, मुझे पता है कि एक ही परिणाम में लाने के लिए किसी भी वैकल्पिक तरीका मौजूद है या नहीं करना चाहते हैं।

कलंक, ग्रेस्केल के लिए जे एस समाधान, ... भी कर रहे हैं

का स्वागत करते हैं backdrop-filter के विकास के माध्यम https://bugs.chromium.org/p/chromium/issues/detail?id=497522

Answer 1

ट्रैक किया जा सकता है आप पृष्ठभूमि छवियों के लिए अलग अलग फिल्टर को जोड़ने का प्रयास कर सकते हैं:

https://css-tricks.com/almanac/properties/f/filter/

इस पर गिरावट यह है कि यह केवल छवियों पर काम करता है।

• कलंक (पिक्सेल)
• चमक (%)
• विपरीत (%)
• ड्रॉप-छाया (:

  असल में, वहाँ 10 में निर्मित सीएसएस filter संपत्ति के लिए फ़िल्टर कर रहे हैं h-छाया v-छाया कलंक प्रसार रंग)

• ग्रेस्केल (%)
• रंग घुमाने (डिग्री)
• उलट (%)
• अस्पष्टता (%)
• तर (%)
• सेपिया (%)

और अतिरिक्त, आप इसे एक यूआरएल प्रदान कर सकते हैं, जो appropariate साथ एक XML फ़ाइल शामिल फिल्टर।

Answer 2

मैं अगर आप अभी भी इस सवाल का पीछा कर रहे पता नहीं है, लेकिन भविष्य में अन्य उपयोगकर्ताओं के लिए:

इस आशय सीएसएस छद्म वर्ग के साथ इस प्रकार पूरा किया जा सकता है, कोई जावास्क्रिप्ट आवश्यक है! नीचे दिखाया गया है:

body, 
 
main::before { 
 
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg) 0/cover fixed; 
 
} 
 

 
main { 
 
    margin: 100px auto; 
 
    position: relative; 
 
    padding: 10px 5px; 
 
    background: hsla(0, 0%, 100%, .3); 
 
    font-size: 20px; 
 
    font-family: 'Lora', serif; 
 
    line-height: 1.5; 
 
    border-radius: 10px; 
 
    width: 60%; 
 
    box-shadow: 5px 3px 30px black; 
 
    overflow: hidden; 
 
} 
 

 
main::before { 
 
    content: ''; 
 
    margin: -35px; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    filter: blur(20px); 
 
    z-index: -1; 
 
}

<main> 
 
    <blockquote>"The more often we see the things around us &#45; even the beautiful and wonderful things &#45; the more they become invisible to us. That is why we often take for granted the beauty of this world: the flowers, the trees, the birds, the clouds &#45; 
 
    even those we love. Because we see things so often, we see them less and less." 
 
    <footer>&mdash; 
 
     <cite> 
 
     Joseph B. Wirthlin 
 
     </cite> 
 
    </footer> 
 
    </blockquote> 
 
</main>

लाइव उदाहरण Codepen पर देखा जा सकता: https://codepen.io/jonitrythall/pen/GJQBOp

त्वरित नोट:

अपने पहले ही निकल पड़े वेबसाइट संरचना के आधार पर आपका ज़ेड-इंडेक्स एक्सा में वर्णित एक से अलग हो सकता है mple।

Answer 3

मैं लोकप्रिय फ्रॉस्टेड ग्लास प्रभाव प्राप्त करने के लिए इसका उपयोग करता हूं। जब तक किसी को सफलतापूर्वक एक अच्छा polyfill backdrop-filter के लिए मैं एक वापस आने के रूप में एक से थोड़ा पारदर्शी पृष्ठभूमि का उपयोग कर रहा invents:

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

/* if backdrop support: very transparent and blurred */ 
@supports ((-webkit-backdrop-filter: blur(2em)) or (backdrop-filter: blur(2em))) { 
    .backdrop-blur { 
    background-color: rgba(255, 255, 255, .5); 
    -webkit-backdrop-filter: blur(2em); 
    backdrop-filter: blur(2em); 
    } 
} 

फिल्टर currently supported ब्राउज़रों में काम करेंगे। (प्रयोगात्मक वेब प्लेटफार्म सुविधाओं के साथ सफारी और क्रोम सक्षम) कोड भविष्य के ब्राउज़र में भी काम करना चाहिए जो कि इससे पहले नहीं बदलता है, तो अपरिक्स्ड backdrop-filter का समर्थन करता है।

बिना और पृष्ठभूमि फिल्टर समर्थन के साथ उदाहरण:?