पृष्ठभूमि-फ़िल्टर - सीएसएस-ट्रिक्स

backdrop-filterसीएसएस में संपत्ति फिल्टर प्रभाव (लागू करने के लिए प्रयोग किया जाता है grayscale, contrast, blurएक तत्व की पृष्ठभूमि / पृष्ठभूमि करने के लिए, आदि)। backdrop-filterजैसा ही होता है filter, सिवाय इसके फिल्टर प्रभाव तत्व की सामग्री के लिए की पृष्ठभूमि के लिए एक ही आवेदन किया है और बजाय कर रहे हैं, संपत्ति।

क्लासिक उदाहरण:

पृष्ठभूमि-फ़िल्टर के बिना फ़िल्टर्ड पृष्ठभूमि

इससे पहले backdrop-filter, फ़िल्टर की गई पृष्ठभूमि को जोड़ने का एकमात्र तरीका एक अलग "पृष्ठभूमि" तत्व जोड़ना था, इसे अग्रभूमि तत्व (एस) के पीछे रखें और इसे इस तरह फ़िल्टर करें:

.background ( filter: blur(4px); position: absolute; width: 100%; height: 100%; )

backdrop-filterसंपत्ति आप इस तत्व अतिरिक्त "पृष्ठभूमि" को खत्म करने और पृष्ठभूमि सीधे के लिए फ़िल्टर लागू कर सकते हैं:

.foreground ( backdrop-filter: blur(10px); ) /* No .wrapper needed! */

लेखन के समय, backdrop-filterफ़िल्टर इफेक्ट्स मॉड्यूल 2 एडिटर ड्राफ्ट का हिस्सा है और आधिकारिक तौर पर किसी भी विनिर्देश का हिस्सा नहीं है। ब्राउज़र समर्थन वर्तमान में सीमित है (नीचे "ब्राउज़र समर्थन" देखें)।

वाक्य - विन्यास

.element ( backdrop-filter: ()* | none )

निम्नलिखित में से कोई भी एक हो सकता है:

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()
• url() - (एसवीजी फिल्टर लगाने के लिए)

आप एक बैकड्रॉप पर कई एस लगा सकते हैं , जैसे:

.element ( backdrop-filter: grayscale(0.5) opacity(0.8) /*… and on and on… */; )

फ़िल्टर कार्यों में से प्रत्येक के लिए स्वीकार्य मानों के लिए W3C फ़िल्टर इफेक्ट्स मॉड्यूल वर्किंग ड्राफ्ट देखें।

उदाहरण

फ़िल्टर फ़ंक्शंस और उन्हें एक साथ उपयोग करने के निफ्टी तरीकों पर एक व्यापक नज़र के लिए, filterसीएसएस-ट्रिक्स पर पंचांग प्रविष्टि देखें ।

निम्नलिखित पेन रॉबिन रेंडले के लेख की खोज में एक उदाहरण से लिया गया है backdrop-filter।

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
.६	नहीं न	नहीं न	१।	9 *

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	नहीं न	81	9.0-9.2 *

सम्बंधित

• filter

साधन

• रॉबिन Rendle द्वारा पृष्ठभूमि-फ़िल्टर संपत्ति
• पृष्ठभूमि-फ़िल्टर पर एमडीएन प्रविष्टि