सीएसएस पारदर्शी पृष्ठभूमि छवि "डेटा:" का उपयोग

मैं कुछ साइटों पर देखा है कि तुम एक "डाटा" कीवर्ड का उपयोग सीएसएस में चित्रों को शामिल कर सकते हैं:सीएसएस पारदर्शी पृष्ठभूमि छवि "डेटा:" का उपयोग

.stuff { 
    background: transparent url(data:image/gif;base64,SOMEWEIRDCODEHERE) repeat center top; 
}

अजीब कोड की तरह एक बेस 64 ecoded स्ट्रिंग की तरह दिखता है :

R0lGODlhMwAxAIAAAAAAAP /// yH5BAAAAAAALAAAAAAzADEAAAK8jI + pBr0PowytzotTtbm/DTqQ6C3hGX ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd LbXsFZYmSMPnHLB + zNJFbq15 + SOf50 + 6rG7lKOjwV1ibGdhHYRVYVJ9Wn k2HWtLdIW MSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw ==

बहुत अच्छा लग रही: डी

मैं सोच रहा था कि कैसे मैं इस तरह एक पारदर्शी 1x1 पिक्सेल GIF शामिल कर सकते हैं? क्या किसी को ऐसी छवि के लिए डेटा कोड पता है?

क्या यह छोटी और बहुत आम छवियों के लिए ऐसा करने का अच्छा विचार है? क्या सभी ब्राउज़र इसका समर्थन करते हैं?

स्रोत

2011-04-07 Alex

जब तक मुझे कुछ पता नहीं है, तो एक सीएसएस पृष्ठभूमि छवि के रूप में स्पेसर gif का उपयोग करने का कोई कारण नहीं है। –

हाय बेन। मैं लाइन नंबरों को अचयनित करने की कोशिश कर रहा हूं: http://jsfiddle.net/rVwqR/ – Alex

बस सीएसएस के माध्यम से इस तरह के चयन को रोकें; कोई पृष्ठभूमि छवि की आवश्यकता नहीं है: http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting/4407335#4407335 –

सिर्फ डेटा uri के लिए कुछ के बारे में कन्वर्ट करने के लिए The data URI scheme

उपयोग डाटा यूआरआई रसोई कहा जाता है यही कारण है कि। लिंक: http://software.hixie.ch/utilities/cgi/data/data

स्रोत

2011-04-07 21:47:38 Shaz

मैंने एक छवि को बदलने की कोशिश की और मुझे एक खाली पृष्ठ – Alex

@Alex: हां, ऐसा इसलिए है क्योंकि छवि पारदर्शी नहीं है? किसी भी तरह से, एक बार कनवर्ट करने के बाद, पता बार में यूआरएल कॉपी करें। 'डेटा' से शुरू होना चाहिए। – Shaz

आह मैं अब देखता हूं, लेकिन जेनरेट कोड बहुत बड़ा है: http: // jsfiddle।net/rSzfd /: x – Alex

data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

कुछ भी नहीं है ऐसा करने के साथ गलत है, तो आप एक HTTP राउंड ट्रिप सहेजें। केवल नकारात्मक पक्ष यह है कि यह IE के पुराने संस्करणों में काम नहीं करता है

स्रोत

2011-04-07 21:48:30

यह एक सफेद पृष्ठभूमि दिखाता है। मैं इसे पारदर्शी कैसे बना सकता हूं? – Alex

क्षमा करें, इसे अपडेट किया गया। –

धन्यवाद, यह काम करता है। – dsomnus

यह एक पिक्सेल

background-image: url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);

स्रोत

2012-05-18 05:21:39 rushkeldon

अप-टू-डेट की एक पारदर्शी GIF है (IE8, मुझे विश्वास है, यह समर्थन करने के लिए शुरू कर दिया) डेटा यूआरआई के लिए ब्राउज़र समर्थन विवरण:

http://caniuse.com/#feat=datauri

स्रोत

2013-09-26 11:04:03 callum

ब्राउज़र आपको समर्थन करने के लिए आप rgba() का उपयोग कर से बेहतर हो सकता है की जरूरत पर निर्भर करता है। मुझे पता है कि यह सवाल थोड़ा पुराना है।

body { 
    background-color: rgba(0, 0, 0, .5); 
}

स्रोत

2013-09-26 11:13:50

सीएसएस पारदर्शी पृष्ठभूमि छवि "डेटा:" का उपयोग

उत्तर

संबंधित मुद्दे