मार्कअप भाषा की क्षमताएं - एचटीएमएल - और कैस्केडिंग स्टाइल शीट - सीएसएस - आपको कई तरीकों से एक छवि को दूसरे में रखने की अनुमति देती है। बेशक, इसके लिए वेब पेज लेआउट में कुछ कौशल की आवश्यकता होती है, और आपको मौजूदा कोड के आधार पर एक विशिष्ट विधि चुनने की आवश्यकता होती है। हालांकि, कुछ मामलों में, आप स्रोत कोड को संपादित किए बिना कर सकते हैं।
अनुदेश
चरण 1
साइट के पृष्ठों में कोई बदलाव किए बिना एक छवि को दूसरे में डालने का एक तरीका है। ऐसा करने के लिए, सर्वर पर संग्रहीत पृष्ठभूमि छवि को संपादित करने के लिए पर्याप्त है - उस पर अग्रभूमि छवि रखने के लिए किसी भी ग्राफिक्स संपादक का उपयोग करें। यदि यह विधि आपके लिए काम करती है, तो भंडारण स्थान और पृष्ठभूमि छवि फ़ाइल के नाम को परिभाषित करके प्रारंभ करें। इसे पेज के सोर्स कोड में ढूंढकर या अलग टैब में खोलकर और ब्राउजर के एड्रेस बार में पूरा पाथ देखकर किया जा सकता है।
चरण दो
सामग्री प्रबंधन प्रणाली या एफ़टीपी क्लाइंट के फ़ाइल प्रबंधक का उपयोग करके, अपने कंप्यूटर पर आवश्यक फ़ाइल डाउनलोड करें और इसे किसी भी ग्राफिक्स संपादक में खोलें - उदाहरण के लिए, विंडोज़ के साथ स्थापित पेंट एप्लिकेशन में।
चरण 3
अग्रभूमि चित्र को पृष्ठभूमि पर रखें - इसके लिए आपको "होम" टैब पर "इन्सर्ट" ड्रॉप-डाउन सूची से "इन्सर्ट फ्रॉम" आइटम का चयन करना होगा और खुलने वाले डायलॉग में आवश्यक फाइल को ढूंढना होगा। फिर मौजूदा पृष्ठभूमि पर सम्मिलित छवि की स्थिति को समायोजित करें (इसे माउस से खींचें) और परिणाम (Ctrl + S) सहेजें।
चरण 4
संपादित चित्र को वापस लोड करें, पुराने को अधिलेखित कर दें। यह प्रक्रिया को पूरा करता है।
चरण 5
वर्णित विधि उस स्थिति में असुविधाजनक है जब सम्मिलित चित्रों को समय-समय पर बदलने की आवश्यकता होती है। फिर HTML भाषा की क्षमताओं का उपयोग करें - उदाहरण के लिए, पृष्ठभूमि छवि को उस पृष्ठ तत्व की पृष्ठभूमि बनाएं जिसमें अग्रभूमि छवि रखी जाएगी। ऐसा कंटेनर तत्व, कह सकते हैं, एक परत (div) हो सकता है। बड़ी तस्वीरों को इसकी पृष्ठभूमि बनाने के लिए, आपको शैली विवरण - div टैग की शैली विशेषता का उपयोग करने की आवश्यकता है। HTML कोड में एक खाली कंटेनर इस तरह दिख सकता है:
कोष्ठक में, अपनी साइट पर पृष्ठभूमि छवि फ़ाइल का पता और नाम इंगित करें।
चरण 6
पृष्ठभूमि कंटेनर के किनारों से पैडिंग की मात्रा निर्धारित करने के लिए समान शैली विशेषता का उपयोग करके अग्रभूमि छवि (img) टैग बनाएं। उदाहरण के लिए:
यहां, चौड़ाई और ऊंचाई विशेषताएँ छवि के आयामों को निर्धारित करती हैं, और पैडिंग के बाद की चार संख्याएं कंटेनर के किनारों से पिक्सेल में पैडिंग को इंगित करती हैं, जो शीर्ष (50) से शुरू होती है और आगे दक्षिणावर्त (60 - दाएं, 70 - नीचे, 80 - बाएं)।
चरण 7
आईएमजी टैग को एक कंटेनर में रखें:
चरण 8
बनाई गई पंक्तियों को पृष्ठ के स्रोत कोड में जोड़ें, और फिर, इंडेंट को बदलते हुए, पृष्ठभूमि छवि की पृष्ठभूमि के विरुद्ध सम्मिलित छवि की स्थिति को समायोजित करें।
