शारीरिक पृष्ठभूमि छवि सजिलैसँग भयो

HTML

तपाईंले धेरै साइटहरूमा फेला पार्नुहुने एउटा राम्रो सुविधा जहाँ केन्द्र सामग्री क्षेत्र पृष्ठ पछाडि ओर्लिएको छ पछाडि ड्रप छायाको साथ देखा पर्दछ। यो वास्तवमै एक साधारण सरल विधि हो जुन तपाईंको ब्लगलाई एकल पृष्ठभूमि छविको साथ राम्रो (वा अन्य वेबसाइट) राम्रो देखिन्छ।

यो कसरी गरिन्छ?

  1. तपाइँको सामग्री कत्ति चौडा छ बाहिर आंकडा। उदाहरण: 750० px।
  2. तपाईंको दृष्टान्त अनुप्रयोगमा छवि बनाउनुहोस् (म इलस्ट्रेटर प्रयोग गर्दछु) सामग्री क्षेत्र भन्दा फराकिलो। उदाहरण: 800px।
  3. छविको पृष्ठभूमि सेट गर्नुहोस् तपाईको ब्लगको प्रत्येक पट्टिमा।
  4. पृष्ठभूमिमा एक सेतो क्षेत्र जोड्नुहोस्।
  5. सेतो क्षेत्रमा छायाँ लागू गर्नुहोस् जुन क्षेत्रको दुबै छेउबाट बाहिर जान्छ।
  6. बाक्लो क्षेत्र चौडाई चौडाई १ पिक्सेल उचाईमा सेट गर्नुहोस्। यसले छिटो रेन्डरिंगको लागि छविलाई राम्रो र कम्प्याक्ट डाउनलोड गर्न बनाउँदछ।
  7. छवि आउटपुट गर्नुहोस्।

यहाँ छ कि मैले यसलाई इल्स्ट्रेटरको प्रयोग गरेर कसरी बनाएँ (ध्यान दिनुहोस् कि मसँग बाली लाग्ने क्षेत्र धेरै अग्लो छ ... त्यो मात्र हो कि तपाईं म के गर्दैछु हेर्न सक्नुहुन्छ):
इलस्ट्रेटरको साथ पृष्ठभूमि

पृष्ठभूमि छविको साथ आउटपुट कस्तो देखिन्छ भन्ने यहाँ उदाहरण छ।
पृष्ठभूमि छवि को उदाहरण

यहाँ तपाइँको शरीर शैली ट्याग प्रयोग गरी छवि कसरी लागू गर्ने भनेर यहाँ छ CSS फाइल।

पृष्ठभूमि: # B2B2B2 url ('छवि / bg.gif') दोहोर्याउने- y केन्द्र;

यहाँ पृष्ठभूमि शैली ट्यागको विच्छेदन छ:

  • # B2B2B2 - पृष्ठको समग्र पृष्ठभूमि रंग सेट गर्दछ। यस उदाहरणमा पृष्ठभूमि छविमा खैरोसँग मिलाउन खरानी छ।
  • url ('छवि / bg.gif') - पृष्ठभूमि छवि सेट गर्दछ जुन तपाईं प्रयोग गर्न चाहानुहुन्छ।
  • रिपिट - y - y अक्षमा दोहोर्याउन छवि सेट गर्दछ। त्यसो भए पृष्ठभूमि छवि पृष्ठको माथिबाट तल फेरि दोहोरिन्छ।
  • केन्द्र - पृष्ठको मध्यमा छवि सेट गर्दछ।

राम्रो र सजिलो ... एउटा छवि, एक शैली ट्याग!

2 टिप्पणिहरु

  1. 1
  2. 2

तिम्रो के बिचार छ?

यो साइट स्प्याम कम गर्न Akismet को उपयोग गर्दछ। जान्नुहोस् कि तपाईंको डेटा कसरी संसाधित छ.