सीएसएस: बनावट पृष्ठभूमि बनाना

Question

मैं वर्तमान में अपनी साइट के लिए एक छवि पृष्ठभूमि स्थापित करने के साथ संघर्ष कर रहा हूं जो पर्याप्त तेज़ी से लोड हो जाएगा। मैंने डेटा यूआरएल छवि का उपयोग किया है और यहां तक ​​कि छवियों को ऑप्टोमाइज्ड किया है, लेकिन पेज लोड करते समय इसे लंबे समय तक लेना है क्योंकि बैकगोरेंड-छवि अभी भी बहुत बड़ी है। क्या सीएसएस के साथ नीचे की तस्वीर में एक बनावट पृष्ठभूमि रंग बनाने के लिए यह संभव है? यहाँ एक EXAMPLE

मैं इसे कोशिश करते हैं और इस मैच के लिए सक्षम किया गया है है:

Answer 1

नवीनतम CSS3 तकनीक के साथ, यह बनावट पृष्ठभूमि बनाने के लिए संभव है। इसे देखें: http://lea.verou.me/css3patterns/#

लेकिन यह अभी भी कई पहलुओं पर सीमित है। और ब्राउज़र समर्थन भी इतना तैयार नहीं है।

आपकी सर्वश्रेष्ठ शर्त छोटी बनावट छवि का उपयोग कर रही है और उस पृष्ठभूमि को दोहराना है। आप कुछ अच्छा तैयार यहाँ बनावट छवि का उपयोग करने के लिए मिल सकता है:

http://subtlepatterns.com

Answer 2

आप एक छोटे से हिस्से जो दोहराया जा सकता में यदि संभव हो तो छवि टुकड़ा करने की क्रिया कोशिश करनी चाहिए। मैंने उस छवि को 101x101px छवि में काट दिया है।

सीएसएस:

body{ 
    background-image: url(SO_texture_bg.jpg); 
    background-repeat:repeat; 
} 

लेकिन कुछ मामलों में, हम एक छोटे से एक के लिए छवि काट करने में सक्षम नहीं होगा। उस स्थिति में, मैं पूरी छवि का उपयोग करूंगा। लेकिन आप CSS3 विधियों का भी उपयोग कर सकते हैं जैसे मुस्तफा कमल ने उल्लेख किया था।

आपको शुभकामनाएं।

Answer 3

यदि आप छवि बेस -64 कनवर्टर की खोज करते हैं, तो आप कोड के अपने @import url('') अनुभाग में कोड के रूप में कुछ छोटी छवि बनावट फ़ाइलों को एम्बेड कर सकते हैं। यह बहुत सारे कोड की तरह दिखेगा; लेकिन कम से कम आपके सभी डेटा को स्थानीय रूप से संग्रहीत किया जाता है - छवि लोड करने के लिए एक अलग संसाधन को कॉल करने के बजाय।

उदाहरण लिंक:

: http://www.base64-image.de/

जब मैं PNG प्रारूप में एक सरल आइकन के अपने ही सूची से एक फ़ाइल लेते हैं, और आधार -64 में बदलने का है, यह मेरी सीएसएस में इस तरह दिखता है

url('data:image/png;base64,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') 

अपनी बनावट छवियों के साथ, आप एक समान प्रक्रिया को नियोजित करना चाहेंगे।

Answer 4

पृष्ठभूमि के एक हिस्से को काटने के लिए एक छवि संपादक का उपयोग करें, फिर छोटी छवि को उस क्षेत्र को भरने के लिए सीएसएस की पृष्ठभूमि-दोहराने वाली संपत्ति लागू करें जहां इसका उपयोग किया जाता है।

कुछ मामलों में, पृष्ठभूमि-दोहराव सीम बनाता है जहां छवि दोहराती है। एक समाधान एक छवि संपादक का उपयोग निम्न प्रकार से करना है: पृष्ठभूमि छवि से शुरू करना, छवि की प्रतिलिपि बनाना, फ्लिप (दर्पण, घूमना नहीं) प्रतिलिपि बाएं से दाएं, और इसे मूल के दाएं किनारे पर पेस्ट करें, 1 पिक्सेल ओवरलैप करना । संयुक्त छवि के दाएं किनारे से 1 पिक्सेल को हटाने के लिए फसल। अब ऊर्ध्वाधर के लिए दोहराएं: संयुक्त छवि की प्रतिलिपि बनाएँ, प्रतिलिपि को ऊपर से नीचे कॉपी करें, इसे संयुक्त के नीचे पेस्ट करें, एक पिक्सेल ओवरलैप करें। नीचे से 1 पिक्सेल को हटाने के लिए फसल। परिणामी छवि सीम मुक्त होना चाहिए।