CSS को साथ प्रविधि कार्यान्वयन गर्नुहोस्
यदि तपाइँ एक वेबसाइट डिजाइन गर्दै हुनुहुन्छ भने, तपाइँ एक निश्चित पृष्ठभूमि छवि सिर्जना गर्न वा वेब पेजमा वॉटरमार्क कसरी सिक्न इच्छुक हुन सक्छ। यो एक सामान्य डिजाईन उपचार हो जुन एकदम केहि समय को लागि अनलाइन लोकप्रिय भएको छ। यो तपाईंको वेब डिजाइन ट्रिक्सको थोरै प्रभाव हो।
यदि तपाईंले पहिले यो नगरेको वा भाग्य बिना पहिले यो प्रयास गर्नुभएन भने, प्रक्रिया डरलाग्दो देखिन्छ, तर यो वास्तवमा धेरै गाह्रो छैन। यस छोटो ट्यूटोरियलको साथ, तपाईले सीएसएसको प्रयोग गरेर मिनेटको विषयमा प्रविधि मास्टर गर्न आवश्यक जानकारी पाउनुहुनेछ।
सुरु गर्दै
पृष्ठभूमि तस्बिरहरू वा वाटरमार्कहरू (जुन वास्तवमा केवल धेरै हल्का पृष्ठभूमि तस्वीरहरू छन्) प्रिन्ट डिजाइनमा इतिहास छ। कागजातहरू प्रतिलिपि गर्नबाट रोक्नको लागि तिनीहरूलाई लामो पानीमा समावेश गर्दछ। साथै, धेरै फ्लोरर र ब्रोशरले मुद्रण गरिएको टुक्राको डिजाइनको रूपमा ठूलो पृष्ठभूमि छविहरू प्रयोग गर्दछ। वेब डिजाईनसँग लामो उधारिएको शैलीहरू छपछी र पृष्ठभूमि तस्वीरहरू बाट यी मध्ये उधारिएको शैलीहरू हुन्।
यी ठूला पृष्ठभूमि चित्रहरू निम्न तीन CSS शैली विशेषताहरू प्रयोग गरी सिर्जना गर्न सजिलो छ।
- पृष्ठभूमि छवि
- पृष्ठभूमि दोहोर्याउनुहोस्
- पृष्ठभूमि संलग्न
- पृष्ठभूमि आकार
पृष्ठभूमि-छवि
तपाईंले वाटरमार्कको रूपमा प्रयोग गरिने छवि परिभाषित गर्न पृष्ठभूमि-छवि प्रयोग गर्नुहुनेछ। यो शैलीले तपाईको साइटमा रहेको छवि लोड गर्न फाईल मार्ग प्रयोग गर्दछ, सम्भवतः "तस्बिरहरू" नामक डाइरेक्टरीमा सम्भव छ।
पृष्ठभूमि-छवि: url (/images/page-background.jpg);
यो महत्त्वपूर्ण छ कि छवि आफै सामान्य छवि भन्दा हल्का वा बढी पारदर्शी हुन्छ। यसले "वाटरमार्क" को रूप सिर्जना गर्नेछ जुन एक अर्ध-पारदर्शी छवि पाठ, ग्राफिक्स, र वेब पेजको अन्य मुख्य तत्वहरू पछि छ। यो चरण बिना, पृष्ठभूमि तस्बिर तपाईंको पृष्ठमा जानकारी संग प्रतिस्पर्धा गर्नेछ र यसलाई पढ्न गाह्रो बनाउनेछ।
तपाईं पृष्ठभूमि छविलाई कुनै सम्पादन सम्पादन कार्यक्रममा एडोब फोटोशपमा समायोजन गर्न सक्नुहुन्छ।
पृष्ठभूमि-दोहोर्याउनुहोस्
पृष्ठभूमि-दोहोरो सम्पत्ती अर्को आउछ। यदि तपाईं आफ्नो छविको ठूलो वाटरमार्क-शैली ग्राफिक चाहानुहुन्छ भने, तपाइँ यो छवि प्रयोग गर्न सक्नुहुनेछ कि छवि मात्र एक पटक प्रदर्शन गर्दछ।
पृष्ठभूमि-दोहोरो: दोहोरो;
"No-repeat" सम्पत्ति बिना, पूर्वनिर्धारित यो पृष्ठ पृष्ठमा फेरि र दोहोर्याइएको छ। यो सबै भन्दा आधुनिक वेब पेज डिजाईन मा अवांछनीय छ, त्यसैले यस शैली को तपाईंको सीएसएस मा जरूरी मानी जानी चाहिए।
पृष्ठभूमि-अनुलग्नक
पृष्ठभूमि-संलग्न एक सम्पत्ति हो जुन धेरै वेब डिजाइनरहरू बिर्सन्छन्। यसको प्रयोग गरेर तपाईंको पृष्ठभूमि तस्बिर "तय" सम्पत्ति प्रयोग गर्दा स्थानमा राखिएको छ। यो पृष्ठले पृष्ठमा निश्चित गरेको वाटरमार्कमा कस्तो असर पार्छ?
यो गुणको लागि पूर्वनिर्धारित मान "स्क्रोल" हो। यदि तपाईंले पृष्ठभूमि अनुलग्नक मान निर्दिष्ट गर्नुभएन भने, पृष्ठभूमिको बाँकी पृष्ठको साथमा स्क्रोल हुनेछ।
पृष्ठभूमि अनुलग्नक: निश्चित;
पृष्ठभूमि-आकार
पृष्ठभूमि आकार एक नयाँ सीएसएस गुण हो। यसले तपाईँलाई हेर्ने दृश्यपटलको आधारमा पृष्ठभूमिको आकार सेट गर्न दिन्छ। यो उत्तरदायी वेबसाइटहरूका लागि धेरै सहयोगी हो जसले विभिन्न यन्त्रहरूमा विभिन्न आकारहरूमा प्रदर्शन गर्नेछ।
पृष्ठभूमि आकार: आवरण;
यस गुणको लागि तपाईले प्रयोग गर्न सक्नुहुनेछ दुई उपयोगी मानहरू:
- आवरण - पृष्ठभूमि स्केल गर्दछ त्यसैले पूर्ण चौडाइ वा पूर्ण उचाइ देखाइएको छ। यसको मतलब छविको केहि भागहरू स्क्रीनमा देखा पर्न सक्दैन तर सम्पूर्ण क्षेत्र कवर गरिनेछ।
- समाविष्ट - छवि स्केल गर्दछ त्यसैले सम्पूर्ण चौडाई र उचाइ दुवै क्षेत्रमा स्टाइलमा देखाइएको छ। छवि बन्द छैन, तर उल्टो पक्ष यो क्षेत्रको भाग छवि द्वारा कवर नहुन सक्छ।
तपाईंको पृष्ठमा CSS थप्दै
माथिको गुणहरू र तिनीहरूको मानहरू बुझ्न पछि, तपाइँ यी शैलीहरू तपाइँको वेबसाइटमा थप्न सक्नुहुन्छ।
यदि तपाइँ एकल पृष्ठ पृष्ठ बनाउनुहुन्छ भने तपाईंको वेब पृष्ठको HEAD मा निम्न थप्नुहोस्। यदि तपाई बहु बहु पृष्ठ निर्माण गर्दै हुनुहुन्छ र बाह्य पानाको पावरको फाइदा लिन चाहनुहुन्छ भने बाह्य शैली पानाको सीएसएस शैलीहरूमा थप्नुहोस्।