यह अध्ययन मार्गदर्शिका प्रदर्शित करेगी कि सीएसएस के साथ पृष्ठभूमि छवियों का उपयोग कैसे करें। तो चलिए शुरू करते हैं!
सीएसएस के साथ एकाधिक पृष्ठभूमि छवियों का उपयोग कैसे करें?
सीएसएस ' पृष्ठभूमि ”संपत्ति एक आशुलिपि संपत्ति है जिसमें पृष्ठभूमि, पृष्ठभूमि-अनुलग्नक, क्लिप, छवि, दोहराव, मूल, आकार और स्थिति गुण शामिल हैं। पृष्ठभूमि संपत्ति का उपयोग कई छवियों के URL को निर्दिष्ट करने के लिए किया जा सकता है। उन छवियों को तब स्थित किया जाता है और तदनुसार सेट किया जाता है।
आइए एक उदाहरण लेते हैं जिसमें एक div तत्व में वेब पेज लोगो के रूप में केवल एक छवि होती है जबकि दूसरे में तीन छवियां होती हैं।
उदाहरण: सीएसएस के साथ एकाधिक पृष्ठभूमि छवियां जोड़ना
HTML में, लोगो के लिए एक div तत्व जोड़ें और वर्ग का नाम निर्दिष्ट करें। उदाहरण के लिए, हमने इसका नाम ' प्रतीक चिन्ह ”। दूसरा डिव कई छवियों का उपयोग करता है, इसलिए हमने इसे नाम दिया ' एकाधिक-छवियां ”। हालाँकि, आप अपनी पसंद के अनुसार वर्ग का नाम निर्दिष्ट कर सकते हैं।
एचटीएमएल
< डिव कक्षा = 'प्रतीक चिन्ह' < / डिव >< डिव कक्षा = 'बहु-छवियां' < / डिव >
अगले भाग में, हम CSS पृष्ठभूमि संपत्ति का उपयोग करके छवियों को समायोजित करेंगे।
शैली 'लोगो' डिव
।प्रतीक चिन्ह {चौड़ाई : 100% ;
ऊंचाई : 50 पीएक्स ;
गद्दी : 5 पीएक्स ;
अंतर : 5 पीएक्स ;
पृष्ठभूमि-आकार : 100 पीएक्स ;
पृष्ठभूमि दोहराएँ : कोई दोहराने ;
पृष्ठभूमि छवि : यूआरएल ( छवियां/लिनक्स-लोगो.png ) ;
}
वर्ग के साथ div तत्व ' प्रतीक चिन्ह 'निम्न गुणों के साथ लागू किया जाता है:
- ' चौड़ाई 'संपत्ति का उपयोग तत्व की चौड़ाई को' पर सेट करने के लिए किया जाता है 100% ”।
- ' ऊंचाई 'संपत्ति का उपयोग तत्व की ऊंचाई को सेट करने के लिए किया जाता है' 50 पीएक्स ”।
- ' गद्दी 'संपत्ति का उपयोग सेटिंग के लिए किया जाता है' 5 पीएक्स ” तत्व की निर्दिष्ट सामग्री के आसपास का स्थान।
- ' अंतर 'संपत्ति का उपयोग' सेटिंग के लिए किया जाता है 5 पीएक्स ”तत्व के चारों ओर का स्थान।
- ' पृष्ठभूमि-आकार 'संपत्ति तत्व की पृष्ठभूमि छवि आकार को' के रूप में सेट करती है 100 पीएक्स ”।
- ' पृष्ठभूमि दोहराएँ 'मूल्य के साथ' कोई दोहराने ” पृष्ठभूमि को केवल एक बार प्रदर्शित करता है।
- ' पृष्ठभूमि छवि ” संपत्ति का उपयोग छवि के URL को निर्दिष्ट करने के लिए किया जाता है।
शैली 'एकाधिक-छवियाँ' div
.multiple-images {चौड़ाई : 90% ;
ऊंचाई : 45vh ;
अंतर : 1 पीएक्स ऑटो ;
गद्दी : 20 पीएक्स ;
पृष्ठभूमि-आकार : 150 पीएक्स ;
पृष्ठभूमि का रंग : rgb ( 157 , 154 , 151 ) ;
पृष्ठभूमि छवि : यूआरएल ( छवियां/कार्यालय.पीएनजी ) , यूआरएल ( छवियां/html.png ) , यूआरएल ( छवियां/लैपटॉप.png ) ;
पृष्ठभूमि दोहराएँ : कोई दोहराने , कोई दोहराने , कोई दोहराने ;
पृष्ठभूमि स्थिति : बाएं , केंद्र , सही ;
}
अब, दूसरे कंटेनर को इस प्रकार स्टाइल करें:
- ' पृष्ठभूमि का रंग ' संपत्ति तत्व की पृष्ठभूमि का रंग निर्दिष्ट करती है।
- ' पृष्ठभूमि छवि ” संपत्ति कई छवि URL निर्दिष्ट करती है।
- ' पृष्ठभूमि दोहराएँ ” संपत्ति पृष्ठभूमि-छवि संपत्ति में निर्दिष्ट छवियों के अनुक्रम में छवियों के लिए मान सेट करती है। दोनों छवियों को गैर-दोहराव के रूप में सेट किया गया है, जिसका अर्थ है कि वे ब्राउज़र पर केवल एक बार दिखाई देंगी।
- ' पृष्ठभूमि स्थिति ” बैकग्राउंड-इमेज प्रॉपर्टी द्वारा निर्दिष्ट इमेज के क्रम में इमेज की स्थिति को एडजस्ट करता है। पहली छवि बाईं ओर सेट की जाएगी, दूसरी केंद्र में और तीसरी दाईं ओर रखी जाएगी।
ऊपर दिया गया कोड प्रदान करने पर, ब्राउज़र में परिणाम इस प्रकार दिखाई देगा:
इस तरह, हम CSS के साथ कई छवियों की स्थिति को समायोजित कर सकते हैं।
निष्कर्ष
एप्लिकेशन को मनोरंजक और संवादात्मक बनाने के लिए, डेवलपर्स विभिन्न छवियों और रंगों का उपयोग करते हैं। हम CSS बैकग्राउंड प्रॉपर्टीज के साथ कई इमेज सेट कर सकते हैं, जैसे बैकग्राउंड-पोजिशन, बैकग्राउंड-रिपीट, बैकग्राउंड-साइज और बहुत कुछ। इस मैनुअल ने सीएसएस उदाहरणों के साथ कई पृष्ठभूमि छवियों के उपयोग का प्रदर्शन किया है।