CSS कैस्केडिंग स्टाइल शीट्स के लिए एक संक्षिप्त है। यह एक सरल लेकिन शक्तिशाली डिजाइन भाषा है जिसमें वेब पृष्ठों को बदलने की क्षमता है। सरल शब्दों में, यह वेब पेजों को प्रस्तुत करने योग्य बनाने की प्रक्रिया को सुव्यवस्थित करता है और इसकी मदद से उपयोगकर्ताओं से अपील करता है । इस लेख में, हम समझेंगे कि विभिन्न पृष्ठभूमि छवि को सीएसएस में निम्नलिखित क्रम में कैसे लागू किया जाए:
- सीएसएस गुणों में पृष्ठभूमि छवि
- सीएसएस में पृष्ठभूमि छवि
- पृष्ठभूमि दोहराएँ
- पृष्ठभूमि संलग्न
- पृष्ठभूमि की स्थिति
- सीएसएस आकार में पृष्ठभूमि छवि
- पीछे का रंग
सीएसएस गुणों में पृष्ठभूमि छवि
कई गुण हैं जिनका उपयोग छवि के व्यवहार और स्थिति को नियंत्रित करने के लिए किया जाता है। ये गुण हैं:
- पृष्ठभूमि छवि
- पृष्ठभूमि दोहराएँ
- पृष्ठभूमि संलग्न
- पृष्ठभूमि की स्थिति
- पृष्ठभूमि का आकार
- पीछे का रंग
हम इनमें से प्रत्येक गुण से परिचित होंगे और देखेंगे कि कब और कैसे उन्हें किसी दिलचस्प प्रदर्शन के साथ उपयोग करना है।
सीएसएस में पृष्ठभूमि छवि
द पृष्ठभूमि छवि नाम से पता चलता है कि संपत्ति का उपयोग केवल वेब पेज में एक तत्व के माध्यम से पृष्ठभूमि छवि को इंगित करने और सेट करने के लिए किया जाता है। डिफ़ॉल्ट रूप से एक पृष्ठभूमि-छवि एक तत्व के शीर्ष-बाएं कोने पर रखी गई है।
php mysql_fetch_
वाक्य - विन्यास: पृष्ठभूमि-छवि: url | कोई नहीं | रैखिक-ढाल | रेडियल-ढाल
शरीर {पृष्ठभूमि-चित्र: url ('apple.jpg')}url का उपयोग करके पृष्ठभूमि
मापदंडों को समझते हैं:
- url: इस पैरामीटर के लिए इनपुट हमें किसी भी छवि के लिए एक फ़ाइल पथ या छवि के लिए URL को निर्दिष्ट करने की अनुमति देता है जिसे पृष्ठभूमि के रूप में सेट करने की आवश्यकता होती है। एक से अधिक छवि घोषित करने के लिए, Url को अल्पविराम के साथ अलग किया जाता है।
शरीर {पृष्ठभूमि-चित्र: url ('apple.jpg')} 
- कोई नहीं: यह संपत्ति का डिफ़ॉल्ट मूल्य है और कोई पृष्ठभूमि छवि प्रदान नहीं की जाती है यदि इसका मूल्य निर्दिष्ट किया जाता है।
शरीर {पृष्ठभूमि: कोई नहीं}- रैखिक ढलान(): पृष्ठभूमि छवि एक रैखिक ढाल पर सेट है। इस संपत्ति के लिए कम से कम दो रंगों को निर्दिष्ट करने की आवश्यकता होती है यानी ऊपर से नीचे के लिए।
शरीर {पृष्ठभूमि-रंग: # 001 पृष्ठभूमि-छवि: रैखिक-ढाल (सफेद 15%, पारदर्शी 16%), रैखिक-ढाल (सफेद 15%, पारदर्शी 16%) पृष्ठभूमि-आकार: 60px 60px पृष्ठभूमि-स्थिति: 0 0, 30px 30px}- रेडियल-ग्रेडिएंट (): पृष्ठभूमि छवि एक रेडियल ग्रेडिएंट पर सेट है। इस संपत्ति के लिए कम से कम दो रंगों को निर्दिष्ट करने की आवश्यकता होती है यानी केंद्र से किनारों के लिए।
शरीर {पृष्ठभूमि-रंग: # 001 पृष्ठभूमि-छवि: रेडियल-ढाल (सफेद 15%, पारदर्शी 16%), रेडियल-ढाल (सफेद 15%, पारदर्शी 16%) पृष्ठभूमि-आकार: 60px 60px पृष्ठभूमि-स्थिति: 0 0 30px 30px}- दोहरा-रेखीय-ढाल (): यह एक रैखिक ढाल को दोहराता है। आइए हम उसी उदाहरण का उपयोग करें जिसे हमने ऊपर रैखिक-ढाल के लिए रैखिक ढाल में ऊपर-नीचे देखा और अंतर देखें।
बॉडी {बैकग्राउंड-रंग: # 001 बैकग्राउंड-इमेज: रिपीटिंग-लीनियर-ग्रेडिएंट (वाइट 15%, ट्रांसपेरेंट 16%), रिपीटिंग-लीनियर-ग्रेडिएंट (वाइट 15%, पारदर्शी 16%) बैकग्राउंड-साइज़: 60px 60px बैकग्राउंड-पोज़िशन : 0 0, 30px 30px}- दोहराव-रेडियल-ढाल (): यह एक रेडियल ग्रेडिएंट को दोहराता है। हमें उसी उदाहरण का पता लगाएं, जिसका उपयोग हमने रेडियल ग्रेडिएंट में किया था।
शरीर {पृष्ठभूमि-रंग: # 001 पृष्ठभूमि-छवि: दोहराव-रेडियल-ग्रेडिएंट (सफेद 15%, पारदर्शी 16%), दोहराते हुए रेडियल-ढाल (सफेद 15%, पारदर्शी 16%) पृष्ठभूमि-आकार: 60px 60px पृष्ठभूमि-स्थिति : 0 0, 30px 30px}फालबैक बैकग्राउंड
यह एक पेशेवर टिप के रूप में एक पृष्ठभूमि रंग को एक कमबैक विकल्प के रूप में जोड़ने के लिए हमेशा सलाह दी जाती है। यह विशेष रूप से बचाव के लिए आता है जब या तो पृष्ठभूमि छवियां लोड नहीं होती हैं या विकसित करते समय हम जो क्रमिक पृष्ठभूमि सेट करते हैं, वह कुछ पुराने ब्राउज़रों द्वारा समर्थित नहीं होती है, जिसे यह देखा जाता है।
यह उपयोगकर्ता के अनुभव को खराब नहीं करता है और इसे इस तरह घोषित किया जा सकता है:
शरीर {पृष्ठभूमि: url (apple_lost.jpg) गुलाबी}एकाधिक पृष्ठभूमि
हमारे पास कई बैकग्राउंड इमेज सेट करने का भी विकल्प है और यह ज्यादातर मामलों में जरूरी है जैसे कि फोरग्राउंड और बैकग्राउंड इमेज। छवि का क्रम यहां महत्वपूर्ण है, जो छवि सामने होनी चाहिए, वह पहले घोषित की गई है, और जो छवि पिछली तरफ होनी चाहिए वह अगले घोषित की गई है।
नीचे कई पृष्ठभूमि छवियों के लिए उदाहरण दिया गया है:
शरीर {पृष्ठभूमि-छवि: url ('छोटा-दिल। jpg'), url ('पृष्ठभूमि.jpg')}पृष्ठभूमि दोहराएँ
एक छवि के दोहराने व्यवहार को परिभाषित करने के लिए पृष्ठभूमि-छवि के साथ-साथ पृष्ठभूमि-दोहराने की संपत्ति का उपयोग किया जाता है। यह निर्दिष्ट करता है कि पृष्ठभूमि छवि दोहराई जाएगी या नहीं। डिफ़ॉल्ट रूप से पृष्ठभूमि-छवि दोनों लंबवत और क्षैतिज रूप से दोहराई जाती है।
संभावित मूल्य हैं:
- दोहराना- छवि क्षैतिज और लंबवत दोनों को दोहराती है
- नो-रिपीट - इमेज रिपीट नहीं होती
- रिपीट-एक्स - छवि क्षैतिज रूप से दोहराई जाती है
- रिपीट-वाई - छवि को लंबवत दोहराया जाता है
- space- छवि को रिक्त स्थान या अंतराल के बीच भी दोहराया जाता है।
- दौर - छवि को उन दोनों के बीच बिना किसी अंतराल के क्षेत्र को भरने के लिए दोहराया जाता है।
पृष्ठभूमि-दोहराने संपत्ति के लिए सीएसएस सिंटैक्स है:
पृष्ठभूमि दोहराएँ: दोहराना | repeat- x | repeat-y | no-repeat- space | राउंड |
शरीर {पृष्ठभूमि-छवि: url ('heart.png'), url ('background.png') पृष्ठभूमि-दोहराना: repeat-y, repeat-x पृष्ठभूमि-रंग: #ffffff}पृष्ठभूमि संलग्न
द पृष्ठभूमि संलग्न संपत्ति का उपयोग पृष्ठभूमि-छवि के साथ यह बताने के लिए किया जाता है कि सामग्री स्क्रॉल की गई है या नहीं, छवि को स्क्रॉल करना चाहिए या नहीं। यह दर्शाता है कि पृष्ठभूमि की छवि को ठीक किया जाना चाहिए या ब्राउज़र विंडो दृश्य के सापेक्ष दस्तावेज़ के साथ स्क्रॉल करना चाहिए। डिफ़ॉल्ट मान स्क्रॉल करना है।
संभावित मूल्य हैं:
- स्क्रॉल - छवि पृष्ठ के साथ स्क्रॉल करती है।
- निश्चित - छवि पृष्ठ के साथ स्क्रॉल नहीं होगी
पृष्ठभूमि-लगाव के लिए CSS सिंटैक्स है:
पृष्ठभूमि संलग्न: स्क्रॉल |
शरीर {पृष्ठभूमि-छवि: url ('heart.png'), url ('background.png') पृष्ठभूमि-दोहराएं: स्थान, गोल}पृष्ठभूमि की स्थिति
द पृष्ठभूमि की स्थिति संपत्ति का उपयोग पृष्ठभूमि छवि के स्थान या स्थिति को दर्शाने के लिए किया जाता है। संभावित मूल्य हैं:
- ऊपर
- सही
- तल
- बाएं
- केंद्र
- इन मूल्यों का संयोजन (उदा।, बाएं शीर्ष)
पृष्ठभूमि-स्थिति के लिए CSS सिंटैक्स है:
ansible बनाम शेफ बनाम कठपुतली
पृष्ठभूमि की स्थिति: शीर्ष | दाएँ | बाएँ | नीचे | केंद्र |
बॉडी {बैकग्राउंड-इमेज: url ('heart.png') बैकग्राउंड-रिपीट: नो-रिपीट बैकग्राउंड-अटैचमेंट: स्क्रॉल}सीएसएस आकार में पृष्ठभूमि छवि
यह संपत्ति सबसे उपयोगी में से एक है क्योंकि यह हमें पृष्ठभूमि छवि के आकार को नियंत्रित करने की अनुमति देता है। अलग-अलग संयोजन हैं जिन्हें हम इस संपत्ति के साथ नियोजित कर सकते हैं और तदनुसार परिणाम प्राप्त कर सकते हैं। डिफ़ॉल्ट मान ऑटो है।
पृष्ठभूमि-आकार के साथ निम्नलिखित मूल्यों का उपयोग किया जा सकता है:
जावा में एक्शनलिस्टन क्या है
- ऑटो
- छवि की लंबाई-चौड़ाई और चौड़ाई उदा। 20px 40px।
- प्रतिशत के रूप में छवि की ऊँचाई और चौड़ाई w.r.t मूल तत्व उदा। 50% 50%।
- केंद्र- छवि को केंद्र में संरेखित करें
- कवर, छवि को पूरी तरह से पृष्ठभूमि क्षेत्र द्वारा कवर करने के लिए स्केलिंग।
- सम्मिलित है, चित्र को उसकी वास्तविक ऊंचाई और चौड़ाई तक फिट करने के लिए।
पृष्ठभूमि-स्थिति के लिए CSS सिंटैक्स है:
पृष्ठभूमि का आकार: मान
body {बैकग्राउंड-इमेज: url ('heart.png'), url ('background.png') बैकग्राउंड-रिपीट: no-repeat, repeat बैकग्राउंड-साइज़: 400px 150px, cover}body {बैकग्राउंड-इमेज: url ('heart.png'), url ('background.png') बैकग्राउंड-रिपीट: no-repeat, repeat बैकग्राउंड-साइज़: समाहित करें, 400px 150px}पीछे का रंग
सीएसएस में सभी संपत्तियों में यह सबसे सरल है। यह पृष्ठ की पृष्ठभूमि पर ठोस रंग लागू करता है। इस संपत्ति का मूल्य रंगों (जैसे लाल, नीला, आदि), हेक्स मूल्य और आरजीबी मूल्य में निर्दिष्ट किया जा सकता है।
पृष्ठभूमि-रंग के लिए CSS सिंटैक्स है:
पीछे का रंग: मान
शरीर {पृष्ठभूमि-छवि: url (छोटा-दिल। jpg) पृष्ठभूमि-रंग: # 22a8e3}यह उन सभी गुणों को समाप्त करता है जो हम पृष्ठभूमि के साथ उपयोग कर सकते हैं। हम हमेशा गुणों के विभिन्न संयोजनों की कोशिश कर सकते हैं जैसा कि हमने अपने प्रदर्शन में देखा था।
CSS आवश्यक है और हर फ्रंट-एंड वेब डेवलपर्स के लिए कौशल प्राप्त करना चाहिए। यह पृष्ठभूमि को डिजाइन और स्टाइल करते समय और प्रभावशाली वेबसाइटों के निर्माण और उपयोगकर्ता के अनुभव को समृद्ध करने में मदद करता है। सबसे अच्छा प्रयोग करते रहना है और इस विशेष फ्रंट-एंड तकनीक का पूरा लाभ उठाना है क्योंकि यह चमत्कार कर सकता है और पृष्ठ को गतिशील रूप से बदल सकता है।
हमारी जाँच करें जो प्रशिक्षक के नेतृत्व वाले लाइव प्रशिक्षण और वास्तविक जीवन की परियोजना के अनुभव के साथ आता है। यह प्रशिक्षण आपको बैक-एंड और फ्रंट-एंड वेब तकनीकों के साथ काम करने के लिए कौशल में कुशल बनाता है। इसमें वेब डेवलपमेंट, jQuery, Angular, NodeJS, ExpressJS और MongoDB पर प्रशिक्षण शामिल है।
क्या आप हमसे कोई प्रश्न पूछना चाहते हैं? कृपया 'सीएसएस में पृष्ठभूमि छवि' के टिप्पणी अनुभाग में इसका उल्लेख करें और हम आपके पास वापस आ जाएंगे।