सीएसएस में पृष्ठभूमि (रंग, स्थिति, छवि, दोहराना, लगाव) - सभी पृष्ठभूमि रंग या Html तत्वों की पृष्ठभूमि छवि सेट करने के लिए। सीएसएस पृष्ठभूमि। एक सीएसएस छवि को दोहराने के लिए पूरी गाइड

लेखक से: मैं सभी का स्वागत करता हूं। पृष्ठभूमि के रंग और चित्र वेब डिज़ाइन में बहुत बड़ी भूमिका निभाते हैं, क्योंकि वे किसी भी तत्व को अधिक आकर्षक रूप से सजाने की अनुमति देते हैं। आज हम देखेंगे कि html में बैकग्राउंड कैसे बनाते हैं।

क्या बैकग्राउंड सेट करते समय html से मिलना संभव है?

मुझे तुरंत कहना होगा कि नहीं। आमतौर पर html को वेब पेजों को स्टाइल करने के लिए नहीं बनाया गया है। यह बहुत असहज है। उदाहरण के लिए, एक bgcolor विशेषता है जिसके साथ आप पृष्ठभूमि का रंग सेट कर सकते हैं, लेकिन यह बहुत असुविधाजनक है।

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

मैं सीएसएस के माध्यम से पृष्ठभूमि कैसे निर्धारित करूं?

तो, सबसे पहले, आपको यह तय करने की आवश्यकता है कि आपको पृष्ठभूमि निर्धारित करने के लिए किस तत्व की आवश्यकता है। यही है, हमें उस चयनकर्ता को खोजने की आवश्यकता है जिसके लिए हम नियम लिखेंगे। उदाहरण के लिए, यदि पृष्ठभूमि को पूरे पृष्ठ के लिए एक पूरे के रूप में सेट करने की आवश्यकता है, तो आप इसे बॉडी चयनकर्ता के माध्यम से, सभी ब्लॉकों के लिए - डिव चयनकर्ता के माध्यम से कर सकते हैं। खैर, आदि। पृष्ठभूमि किसी भी अन्य चयनकर्ताओं के लिए बाध्य होनी चाहिए: शैली वर्ग, पहचानकर्ता आदि।

आपके द्वारा चयनकर्ता पर निर्णय लेने के बाद, आपको संपत्ति का नाम स्वयं लिखना होगा। पृष्ठभूमि का रंग सेट करने के लिए (बस एक ठोस रंग, एक ढाल या एक छवि नहीं), पृष्ठभूमि-रंग की संपत्ति का उपयोग करें। इसके बाद आपको एक बृहदान्त्र लगाने और रंग लिखने की आवश्यकता है। यह अलग-अलग तरीकों से किया जा सकता है। उदाहरण के लिए, कीवर्ड, हेक्स-कोड, आरजीबी, आरजीबीए, एचएसएल प्रारूपों का उपयोग करना। कोई भी विधि करेंगे।

सबसे अधिक इस्तेमाल की जाने वाली विधि हेक्साडेसिमल कोड है। रंग मिलान के लिए, आप एक प्रोग्राम का उपयोग कर सकते हैं जो रंग कोड दिखाता है। उदाहरण के लिए फोटोशॉप, पेंट या कुछ ऑनलाइन टूल। तदनुसार, उदाहरण के लिए, मैं पूरे वेब पेज के लिए एक सामान्य पृष्ठभूमि लिखूंगा।

बॉडी (पृष्ठभूमि-रंग: # D4E6B3;)

इस कोड को हेड सेक्शन में डालना होगा। यह महत्वपूर्ण है कि फाइलें एक ही फ़ोल्डर में हों।

पृष्ठभूमि के रूप में चित्र

मैं चित्र के रूप में एक छोटे HTML भाषा आइकन का उपयोग करूंगा:

आइए एक पहचानकर्ता के साथ एक खाली ब्लॉक बनाएं:

< div id = "bg" > < / div >

आइए इसे स्पष्ट आयाम और पृष्ठभूमि दें:

# बीजी (चौड़ाई: 400px; ऊंचाई: 250px; पृष्ठभूमि-छवि: url (html.png);)

# बीजी ( चौड़ाई: 400px; ऊंचाई: 250 पीएक्स; पृष्ठभूमि - छवि: url (html। png);

इस कोड से, आप देख सकते हैं कि मैंने एक नई संपत्ति का उपयोग किया है - पृष्ठभूमि-छवि। यह सिर्फ एक HTML तत्व के लिए एक पृष्ठभूमि के रूप में एक तस्वीर डालने के लिए करना है। देखते है क्या हुआ:

चित्र सेट करने के लिए, आपको कोलन के बाद url कीवर्ड लिखना होगा, और फिर कोष्ठकों में फ़ाइल पथ निर्दिष्ट करना होगा। इस मामले में, पथ इस तथ्य के आधार पर निर्दिष्ट किया जाता है कि छवि HTML दस्तावेज़ के समान फ़ोल्डर में स्थित है। आपको पहलू अनुपात को भी निर्दिष्ट करने की आवश्यकता है।

यदि आपने ऐसा किया है, और पृष्ठभूमि अभी भी ब्लॉक में दिखाई नहीं देती है, तो फिर से जांचें कि क्या आपने चित्र का नाम सही तरीके से लिखा है, यदि पथ और विस्तार को सही तरीके से निर्दिष्ट किया गया था। ये सबसे आम कारण हैं कि पृष्ठभूमि को केवल इसलिए प्रदर्शित नहीं किया जाता है क्योंकि ब्राउज़र को छवि नहीं मिल सकती है।

लेकिन क्या आपने एक ख़ासियत पर ध्यान दिया है? ब्राउज़र ने छवि को पूरे ब्लॉक में लिया और पुन: पेश किया। तो, ताकि आप जानते हैं, यह पृष्ठभूमि छवियों का डिफ़ॉल्ट व्यवहार है - वे लंबवत और क्षैतिज रूप से दोहराए जाते हैं जब तक कि वे ब्लॉक में फिट नहीं हो सकते। आप इस व्यवहार को आसानी से नियंत्रित कर सकते हैं। ऐसा करने के लिए, पृष्ठभूमि-दोहराने वाली संपत्ति का उपयोग करें, जिसमें 4 मुख्य मूल्य हैं:

दोहराएं - डिफ़ॉल्ट मान, छवि को दोनों तरफ दोहराया जाता है;

रिपीट-एक्स - केवल ओआईएस एक्स के लिए दोहराता है;

रिपीट-वाई - केवल वाई-अक्ष के साथ दोहराता है;

नो-रिपीट - बिल्कुल नहीं दोहराता;

आप प्रत्येक मान लिख सकते हैं और देख सकते हैं कि क्या होता है। मैं इसे इस तरह लिखूंगा:

बैकग्राउंड-रिपीट: रिपीट-एक्स;

पृष्ठभूमि - दोहराने: दोहराने - एक्स;

अब केवल क्षैतिज रूप से दोहराएं। न दोहराने के साथ, केवल एक तस्वीर होगी।

महान, आप इसे पहले से ही समाप्त कर सकते हैं, क्योंकि ये पृष्ठभूमि के साथ काम करने के लिए बुनियादी संभावनाएं हैं, लेकिन मैं आपको 2 और गुण दिखाऊंगा जो आपको इस पर अधिक नियंत्रण प्राप्त करने की अनुमति देते हैं।

पुनरावृत्ति के साथ, लेआउट डिज़ाइनर एक छोटी छवि का उपयोग करके पृष्ठभूमि की बनावट और ग्रेडिएंट्स को प्राप्त करते थे। यह 30 पिक्सेल 10 पिक्सेल या उससे कम हो सकता है। शायद थोड़ा और। छवि ऐसी थी कि जब इसे एक या दोनों तरफ दोहराया जाता था, तो कोई भी संक्रमण दिखाई नहीं देता था, जिसके परिणामस्वरूप, एक एकल ठोस पृष्ठभूमि प्राप्त हुई थी। वैसे, यह दृष्टिकोण अब उपयोग करने के लायक है यदि आप अपनी साइट पर एक पृष्ठभूमि के रूप में एक सहज बनावट का उपयोग करना चाहते हैं। आज, सीएसएस 3 तरीकों का उपयोग करके ढाल पहले से ही लागू किया जा सकता है, हम निश्चित रूप से इस बारे में बात करेंगे।

पृष्ठभूमि की स्थिति

डिफ़ॉल्ट रूप से, पृष्ठभूमि छवि, यदि इसे दोहराने के लिए सेट नहीं किया गया है, तो यह अपने ब्लॉक के ऊपरी बाएं कोने में होगा। लेकिन पृष्ठभूमि-स्थिति संपत्ति का उपयोग करके स्थिति को आसानी से बदला जा सकता है।

आप इसे विभिन्न तरीकों से पूछ सकते हैं। विकल्पों में से एक बस उन पक्षों को इंगित करना है जिसमें चित्र स्थित होना चाहिए:

बैकग्राउंड-पोज़िशन: राइट टॉप;

पृष्ठभूमि - स्थिति: सही शीर्ष;

यही है, लंबवत रूप से, सब कुछ समान रहा: पृष्ठभूमि छवि शीर्ष पर स्थित है, लेकिन क्षैतिज रूप से, हमने पक्ष को दाईं ओर, यानी दाईं ओर बदल दिया। स्थिति सेट करने का एक अन्य तरीका प्रतिशत के रूप में है। इस मामले में, ऊपरी बाएं कोने से किसी भी मामले में उलटी गिनती शुरू होती है। 100% - पूरे ब्लॉक। इस प्रकार, चित्र को केंद्र में रखने के लिए, इसे लिखें:

पृष्ठभूमि की स्थिति: 50% 50%;

पृष्ठभूमि - स्थिति: 50% 50%;

स्थिति से संबंधित एक महत्वपूर्ण बात याद रखें - पहला पैरामीटर हमेशा क्षैतिज स्थिति है, और दूसरा ऊर्ध्वाधर स्थिति है। इसलिए, यदि आप 80% 20% का मान देखते हैं, तो आप तुरंत निष्कर्ष निकाल सकते हैं कि पृष्ठभूमि की छवि को दृढ़ता से दाईं ओर स्थानांतरित कर दिया जाएगा, लेकिन यह बहुत नीचे नहीं जाएगा।

अंत में, आप पिक्सेल में स्थिति लिख सकते हैं। सब कुछ समान है, लेकिन% के बजाय px होगा। कुछ मामलों में, यह स्थिति भी आवश्यक हो सकती है।

संक्षिप्त संकेतन

सहमत हूं कि अगर सब कुछ उसी तरह से सेट हो जाए जो हमारे द्वारा किए गए तरीके से किया जाता है। यह पता चला है कि चित्र के लिए पथ निर्धारित किया जाना चाहिए, और पुनरावृत्ति, और स्थिति। बेशक, पुनरावृत्ति और स्थिति हमेशा आवश्यक नहीं होती है, लेकिन किसी भी मामले में, शॉर्टहैंड संपत्ति का उपयोग करना अधिक सही होता है। यह इस तरह दिख रहा है:

पृष्ठभूमि: # 333 url (bg.jpg) नो-रिपीट 50% 50%;

पृष्ठभूमि: # 333 url (bg.jpg) नो-रिपीट 50% 50%;

यही है, यदि आवश्यक हो तो समग्र ठोस पृष्ठभूमि रंग रिकॉर्ड करने के लिए पहला कदम है। फिर छवि, पुनरावृत्ति और स्थिति का मार्ग। यदि कुछ पैरामीटर की आवश्यकता नहीं है, तो हम बस इसे छोड़ देते हैं। सहमत हूं, यह बहुत तेज और अधिक सुविधाजनक है, और हम अपने कोड को भी महत्वपूर्ण रूप से कम करते हैं। सामान्य तौर पर, मैं आपको हमेशा संक्षेप में लिखने की सलाह देता हूं, भले ही आपको केवल एक रंग या चित्र निर्दिष्ट करने की आवश्यकता हो।

पृष्ठभूमि छवि के आकार को नियंत्रित करना

हमारी वर्तमान छवि अगली चाल के लिए अच्छी तरह से अनुकूल नहीं है, इसलिए मैं एक और एक ले जाऊंगा। आकार में, इसे एक ब्लॉक की तरह या उससे बड़ा होने दें। तो, कल्पना करें कि आप एक कार्य के साथ सामना कर रहे हैं: एक पृष्ठभूमि छवि बनाने के लिए ताकि यह पूरी तरह से अपने ब्लॉक को न भरे। और चित्र, उदाहरण के लिए, ब्लॉक आकार से भी बड़ा है।

आप इस मामले में क्या कर सकते हैं? बेशक, सबसे सरल और उचित विकल्प केवल चित्र को कम करना होगा, लेकिन ऐसा करना हमेशा संभव नहीं होता है। मान लीजिए कि यह सर्वर पर है और फिलहाल इसे कम करने का कोई समय या अवसर नहीं है। समस्या को पृष्ठभूमि के आकार की संपत्ति के साथ हल किया जा सकता है, जिसे अपेक्षाकृत नया कहा जा सकता है और जो आपको पृष्ठभूमि छवि के आकार में हेरफेर करने की अनुमति देता है, और वास्तव में कोई भी पृष्ठभूमि।

तो, मेरी तस्वीर अब ब्लॉक में सभी जगह लेती है, लेकिन मैं इसे पृष्ठभूमि का आकार दूंगा:

पृष्ठभूमि का आकार: 80% 50%;

पृष्ठभूमि - आकार: 80% 50%;

फिर से, पहला पैरामीटर क्षैतिज आकार है, दूसरा - ऊर्ध्वाधर आकार। हम देख सकते हैं कि सब कुछ सही ढंग से लागू किया गया था - फोटो ब्लॉक की चौड़ाई का 80% हो गया और चौड़ाई आधी हो गई। यहां आपको केवल एक स्पष्टीकरण बनाने की आवश्यकता है - आकार को प्रतिशत में सेट करके, आप चित्र के अनुपात को प्रभावित कर सकते हैं। इसलिए सावधान रहें कि अनुपात से बाहर न निकलें।

जैसा कि आप अनुमान लगा सकते हैं, पृष्ठभूमि का आकार पिक्सेल में भी निर्दिष्ट किया जा सकता है। ऐसे दो अर्थ कीवर्ड भी हैं जिनका उपयोग किया जा सकता है:

कवर - चित्र को स्केल किया जाएगा ताकि कम से कम एक तरफ पूरी तरह से ब्लॉक को भर दे।

कंटेनर - इसे तराजू ताकि चित्र पूरी तरह से अपने अधिकतम आकार में ब्लॉक में फिट हो जाए।

इन मूल्यों का लाभ यह है कि वे चित्र के पहलू अनुपात को नहीं बदलते हैं, जिससे वे समान होते हैं।

इसके अलावा, आपको यह समझना चाहिए कि छवि को खींचने से इसकी गुणवत्ता में गिरावट हो सकती है। मैं लेआउट डिजाइनरों के जीवन और वास्तविक अभ्यास से एक उदाहरण दे सकता हूं। हर कोई जानता है और समझता है कि जब डेस्कटॉप के लिए कोडिंग की जाती है, तो आपको साइट को मॉनिटर की मुख्य चौड़ाई पर अनुकूलित करने की आवश्यकता है: 1280, 1366, 1920. यदि आप एक आकार की पृष्ठभूमि वाली छवि लेते हैं, तो 1280 x 200 कहते हैं, और इसे पृष्ठभूमि का आकार निर्धारित न करें, फिर एक चौड़ाई के साथ स्क्रीन बड़ी होती हैं। एक खाली जगह दिखाई देगी, चित्र पूरी तरह से चौड़ाई नहीं भरेगा।

99% मामलों में, यह वेब डेवलपर को सूट नहीं करता है, इसलिए वह पृष्ठभूमि का आकार निर्धारित करता है: कवर ताकि चित्र हमेशा खिड़की की अधिकतम चौड़ाई तक फैला हो। यह उपयोग करने के लिए एक अच्छी चाल है, लेकिन अब आप इस समस्या का सामना कर रहे हैं कि 1920 पिक्सल की स्क्रीन चौड़ाई वाले उपयोगकर्ता उप-इष्टतम गुणवत्ता की तस्वीर देख सकते हैं।

मैं आपको याद दिला दूं कि यह अधिकतम चौड़ाई तक फैलेगा। तदनुसार, गुणवत्ता स्वचालित रूप से खराब हो जाएगी। यहां एकमात्र सही समाधान शुरू में एक बड़ी तस्वीर का उपयोग करना होगा - 1920 पिक्सल चौड़ा। फिर व्यापक स्क्रीन पर यह अपने प्राकृतिक आकार में होगा, जबकि अन्य पर यह बस धीरे से कट जाएगा, लेकिन साथ ही, पृष्ठभूमि छवि के सही चयन के साथ, यह साइट की उपस्थिति को प्रभावित नहीं करेगा।

सामान्य तौर पर, वास्तविक लेआउट बनाते समय इस लेख में आपके द्वारा प्राप्त किए गए ज्ञान का उपयोग करने का यह सिर्फ 1 उदाहरण है।

सीएसएस के साथ अर्ध-पारदर्शी पृष्ठभूमि

एक और चाल जिसे css का उपयोग करके कार्यान्वित किया जा सकता है वह एक अर्ध-पारदर्शी पृष्ठभूमि है। यही है, इस पृष्ठभूमि के माध्यम से यह देखना संभव होगा कि इसके पीछे क्या है।

एक उदाहरण के रूप में, मैं पूरे पृष्ठ को पृष्ठभूमि की छवि के रूप में सेट करूंगा जिसका उपयोग हमने पहले उदाहरणों में किया था। बीजी पहचानकर्ता के साथ ब्लॉक के लिए, जिस पर हम अपने सभी प्रयोग करते हैं, हम आरजीबीए रंग प्रारूप का उपयोग करके पृष्ठभूमि सेट करेंगे।

जैसा कि मैंने पहले कहा था, रंग सेट करने के लिए सीएसएस में कई प्रारूप हैं। उनमें से एक आरजीबी है, जो ग्राफिक संपादकों में काम करने वालों के लिए एक काफी प्रसिद्ध प्रारूप है। यह इस तरह लिखा गया है: आरजीबी (17, 255, 34);

कोष्ठकों में पहला मूल्य लाल, फिर हरा, फिर नीला का संतृप्ति है। मान 0 से 255 तक संख्यात्मक हो सकता है। तदनुसार, आरजीबीए प्रारूप अलग नहीं है, केवल एक और पैरामीटर जोड़ा जाता है - अल्फा चैनल। मान 0 से 1 तक हो सकता है, जहां 0 पूर्ण पारदर्शिता है।

कम जानकारी

सीएसएस संस्करण

मूल्य

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

एचटीएमएल 5 CSS2.1 आईई सीआर ओप सा एफएक्स

ऑब्जेक्ट मॉडल

document.getElementById ("elementID") .style.backgroundImage

ब्राउज़र्स

इंटरनेट एक्सप्लोरर 7.0 या बाद में एक तत्व की सीमा के अंदर एक पृष्ठभूमि लागू होती है, जिसमें इसका हैलेटआउट गुण सेट होता है। यदि तत्व में एक हैलआउट नहीं है, तो पृष्ठभूमि-छवि संपत्ति तत्व की सीमाओं का सम्मान करेगी जैसा कि कल्पना में निर्दिष्ट है। यदि सीमाओं को ठोस के बजाय धराशायी किया गया हो या नहीं, तो डिस्प्ले में अंतर ध्यान देने योग्य होगा।

यदि तत्व स्क्रॉल या ऑटो पर सेट है, तो बैकग्राउंड स्क्रॉल करने पर Internet Explorer 8 में एक-पिक्सेल वर्टिकल विलंब होगा।

Internet Explorer 7.0 या बाद के संस्करण का समर्थन नहीं करता है।

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

एचटीएमएल 5 CSS2.1 आईई सीआर ओप सा एफएक्स

1

2

3

क्रोम ब्राउज़र में इस उदाहरण का परिणाम अंजीर में दिखाया गया है। 1. ब्राउज़र इंटरनेट एक्सप्लोरर, ओपेरा और फ़ायरफ़ॉक्स लाइन के लिए पृष्ठभूमि को सही ढंग से प्रदर्शित करते हैं (छवि 2)।

चित्र: 1. प्रत्येक सेल के लिए पृष्ठभूमि को दोहराते हुए

चित्र: 2. पूरी लाइन के लिए पृष्ठभूमि

मुझे लगता है कि कोई एकल साइट नहीं है जहां संपत्ति का उपयोग नहीं किया गया है सीएसएस पृष्ठभूमि... ऐसा लगता है, इस संपत्ति से ज्यादा सरल क्या हो सकता है? लेकिन नहीं, किसी पृष्ठ की पृष्ठभूमि के रूप में इसकी क्षमताएं चित्र या रंग के सामान्य उद्देश्य से बहुत व्यापक हैं। कुछ परिचित होगा, लेकिन कुछ निश्चित रूप से कई के लिए एक नवीनता बन जाएगा। किसी भी मामले में, यह अच्छी तरह से जानना उपयोगी होगा कि पृष्ठभूमि कैसे काम करती है।

CSS3 ने संपत्ति में बहुत सी नई चीजें लाई हैं, यह एक पृष्ठभूमि के रूप में पारदर्शिता और कई छवियों का काम है, लेकिन हम इसके बारे में नीचे बात करेंगे, और सबसे पहले संपत्ति की मूल बातें देखें। पृष्ठभूमि.

पीछे का रंग

मुझे पूरा यकीन है कि आपने कई बार बैकग्राउंड कलर असाइनमेंट किए हैं। यह कई प्रकार के संकेतन का उपयोग करके किया जा सकता है: नियमित (रंग नाम का उपयोग किया जाता है), हेक्साडेसिमल या आरजीबी संकेतन। प्रत्येक प्रकार समान है, जो भी आपको सबसे अच्छा लगे उसका उपयोग करें। मैं सबसे छोटे विकल्प का उपयोग करने की कोशिश करता हूं, और धारणा के लिए यह सरल है और शैली फ़ाइल आकार में थोड़ी छोटी है।

पी (पृष्ठभूमि-रंग: लाल;) पी (पृष्ठभूमि-रंग: # f00;) पी (पृष्ठभूमि-रंग: # ff0000;) पी (पृष्ठभूमि-रंग: आरजीबी (255, 0, 0;);

CSS3 में पारदर्शिता के लिए समर्थन है, इसलिए आप इसे हमारे रंग में भी जोड़ सकते हैं, जैसे:

पी (पृष्ठभूमि-रंग: आरजीबीए (255, 0, 0, 0.5);)

अंतिम अंक 50% पारदर्शिता के लिए निर्धारित किया गया था। आप 0 (पूरी तरह से पारदर्शी पृष्ठभूमि) से 1 (पूरी तरह से अपारदर्शी) तक पारदर्शिता मूल्य निर्धारित कर सकते हैं।

पृष्ठभूमि छवि

इस संपत्ति का उपयोग बहुत बार किया जाता है, यह आपको पृष्ठभूमि के लिए एक छवि प्रदान करने की अनुमति देता है। CSS3 पृष्ठभूमि में कई छवियों को असाइन करने की क्षमता जोड़ता है, और प्रत्येक एक प्रकार की परत बनाता है, इसलिए प्रत्येक बाद के एक को पिछले एक पर आरोपित किया जाता है। यह उपयोगी क्यों हो सकता है? सब कुछ काफी सरल है - मान लें कि आपको साइट के प्रत्येक कोने में छोटी चीजों को जकड़ना होगा। अधिक या कम द्रव लेआउट को देखते हुए, एक छवि का उपयोग करना एक विकल्प नहीं है। इसलिए, हम 4 "परतें" बनाते हैं, हम प्रत्येक छवि को अपने स्वयं के कोने में ले जाते हैं और यही है, समस्या हल हो गई है

शरीर (पृष्ठभूमि-छवि: url ("image1"), url ("image2"), url ("छवि चित्र")

यदि आपको पृष्ठभूमि में एक छवि निर्दिष्ट करने की आवश्यकता है, तो हम कोड में केवल पहला छोड़ते हैं, मुझे लगता है कि यह समझ में आता है।
पृष्ठभूमि के रूप में किसी भी छवि का उपयोग करते समय ध्यान में रखने के दो नियम हैं:

• उपयोगकर्ता किसी कारण से चित्र प्रदर्शित नहीं कर सकता है, इसके विपरीत पृष्ठभूमि का रंग निर्धारित करें। यह छवियों के प्रदर्शन को बंद कर सकता है कॉर्नियां, ट्रैफ़िक को बचाता है।
• किसी भी महत्वपूर्ण जानकारी को व्यक्त करने के लिए पृष्ठभूमि छवि का उपयोग न करें। ऊपर बताए गए कारण के लिए, उपयोगकर्ता इसे नहीं देख सकता है।

कई पृष्ठभूमि छवियों के लिए समर्थन पर्याप्त व्यापक है। सभी ब्राउज़र, यहां तक \u200b\u200bकि IE8, इस संपत्ति का समर्थन करते हैं।

ब्लॉग साइट के प्रिय पाठकों। आज हम पांच सीएसएस नियमों को देखेंगे जो आपको एचटीएमएल में किसी भी तत्व के लिए पृष्ठभूमि निर्धारित करने की अनुमति देते हैं - पृष्ठभूमि-स्थिति (छवि, दोहराना, रंग, लगाव)। ठीक है, चलो पृष्ठभूमि यौगिक नियम का उल्लेख करना न भूलें।

इस बारे में कुछ भी मुश्किल नहीं है, लेकिन कुछ सूक्ष्मताएं और बारीकियां हैं जो आपको तैयार किए गए टेम्पलेट के बारे में जानने की जरूरत है (इस बारे में याद रखें कि आप किसी भी डिजाइन के सभी इंस और बाहरी को खोलने में मदद करेंगे)।

मैं आपको एक बार फिर याद दिलाता हूं कि यह लेख एक श्रृंखला का हिस्सा है और सबसे पहले स्टाइल मार्कअप सीखना शुरू किया जाएगा, अर्थात् सीएसएस क्या है और इसे क्या खाया जाता है, के बारे में एक लेख के साथ, अच्छी तरह से, और फिर संदर्भ में दिए गए आदेश का पालन करें। हालाँकि, किसी भी मामले में, यह आपके ऊपर है, लेकिन अब हम पृष्ठभूमि सेट करने के बारे में बात करते हैं।

रंग, पृष्ठभूमि-रंग और पृष्ठभूमि-छवि

आइए सबसे पहले देखें कि Html तत्वों का रंग किस प्रकार उपयोग किया जाता है सीएसएस रंग नियम... वास्तव में, यहां सब कुछ सरल है। वाक्यविन्यास पूरी तरह से सामान्य है और आप हाइपरटेक्स्ट मार्कअप भाषा में कैसे किया गया था, उसके अनुसार रंग सेट कर सकते हैं। जैसा कि आपको याद है, हैश साइन (हैश - "# fe35a3") के बाद रखा गया है, या तीन अंकों का उपयोग कर रहा है, यदि पहला दूसरे के मूल्य से मेल खाता है, तीसरा चौथे, अच्छी तरह से और पांचवें के साथ, क्रमशः छठे (रंग कोड "# a3333" के साथ) "a3f" के रूप में संक्षिप्त किया जा सकता है)।

इसके अलावा, एचटीएमएल और सीएसएस कोड में रंगों को शब्दों के रूप में दर्शाया जा सकता है (उदाहरण के लिए, "लाल"), लेकिन हेक्साडेसिमल कोड सबसे अधिक बार उपयोग किया जाता है:

रंग: # 303

एक उदाहरण के रूप में, मैंने इस छोटे पैराग्राफ को ऊपर (# 303) के समान रंग में रंग दिया है। यह अब अन्य सभी पैराग्राफ (गहरे रंग) के रंग से थोड़ा अलग है, जिसे मैं जिस वर्डप्रेस थीम का उपयोग कर रहा हूं, उसकी सीएसएस फाइल में # 555 सेट है। लेकिन रंग के माध्यम से रंग सेट करना काफी सरल है, लेकिन पृष्ठभूमि के साथ यह थोड़ा अधिक जटिल होगा।

इसलिए, सीएसएस में पृष्ठभूमि के लिए पांच नियम हैं, जो यदि वांछित हैं, तो उन्हें एक टीम में जोड़ा जा सकता है। उन्हें देखने के लिए, आप W3C कंसोर्टियम के वर्तमान विनिर्देश के पृष्ठ पर जा सकते हैं और शब्द खोज शब्द के साथ कुछ भी खोज सकते हैं:

1. पृष्ठभूमि का रंग - यह नियम किसी भी Html तत्व के लिए पृष्ठभूमि का रंग निर्धारित करता है। इसमें, आप कोड या छाया के नाम का उपयोग कर सकते हैं, अर्थात्। सब कुछ वैसा ही है जैसा कि रंग का उपयोग करते समय था।

पृष्ठभूमि की छवि - इसके साथ आप एक तस्वीर को पृष्ठभूमि के रूप में उपयोग कर सकते हैं (लेकिन उसके बारे में पढ़ना सुनिश्चित करें, क्योंकि भारी चित्र पृष्ठ लोडिंग को धीमा कर देगा), जिस पथ को url () कार्यक्षमता में निर्दिष्ट किया जाएगा।

यदि आप कल्पना को देखते हैं, तो आप देखेंगे डिफ़ॉल्ट पृष्ठभूमि रंग कोई भी तत्व पारदर्शी होगा (नियम का डिफ़ॉल्ट मान "पृष्ठभूमि-रंग: पारदर्शी" है)। हालांकि, तत्वों में यह डिफ़ॉल्ट रूप से पारदर्शी नहीं होगा, क्योंकि ये सिस्टम तत्व हैं और उनके पास हाइपरटेक्स्ट मार्कअप भाषा के सामान्य टैग से अलग और अलग सब कुछ है।

पृष्ठभूमि-रंग का रंग मानक (छह या तीन हेक्साडेसिमल अंक, या एक शब्द) के रूप में सेट किया गया है:

पृष्ठभूमि-रंग: #FEFCDE

उदाहरण के लिए, इस पैराग्राफ की पृष्ठभूमि ठीक पृष्ठभूमि-रंग के माध्यम से ठीक ऊपर रंग कोड के साथ सेट की गई है।

अन्य सभी चार सीएसएस नियम केवल पृष्ठभूमि छवि की चिंता करेंगे, जो कि किसी भी एचटीएमएल तत्व के लिए सेट किया जा सकता है और, यदि वांछित है, तो ठीक-ठीक स्थित है। किस ग्राफिक फ़ाइल का उपयोग किया जाएगा, इसका उपयोग करके सेट किया जा सकता है पृष्ठभूमि छवि.

यदि आप शैली मार्कअप भाषा विनिर्देश को देखते हैं, तो आप देखेंगे कि डिफ़ॉल्ट पृष्ठभूमि-छवि "कोई नहीं" है (अर्थात कोई पृष्ठभूमि छवि का उपयोग नहीं किया गया है)। ठीक है, अगर आपको अभी भी इसकी आवश्यकता है, तो url () में आपको इसे पथ निर्दिष्ट करने की आवश्यकता होगी:

पृष्ठभूमि-छवि: url (https: //site/image/comment_top_focus.gif);

उदाहरण के लिए, इस पैराग्राफ के लिए मैंने एक पृष्ठभूमि के साथ एक ग्राफिक फ़ाइल का उपयोग किया, जिस पर ऊपर वर्णित पथ। आप देख सकते हैं कि इस पैराग्राफ के लिए आवंटित पूरा क्षेत्र एक दोहराई गई छवि के साथ कवर किया गया है, जो मूल रूप में इस तरह दिखता है:

उन। जब केवल एक पृष्ठभूमि-छवि नियम का उपयोग ग्राफिक फ़ाइल के लिए पथ को इंगित करता है, तो यह बहुत ही छवि दोनों ऊर्ध्वाधर और क्षैतिज रूप से गुणा किया जाएगा जब तक कि यह विशेष एचटीएमएल तत्व के लिए वेब पेज पर आवंटित पूरे क्षेत्र को शामिल नहीं करता है (हमारे में उदाहरण, यह एक पैराग्राफ था)। ये क्यों हो रहा है?

बैकग्राउंड-रिपीट - बैकग्राउंड इमेज को दोहराएं

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

इसलिए, बैकग्राउंड-रिपीट के साथ हम कर सकते हैं पृष्ठभूमि चित्र की पुनरावृत्ति प्रबंधित करें... इस नियम में केवल चार मान हो सकते हैं:




बैकग्राउंड-पोज़िशन - बैकग्राउंड पोज़िशनिंग

अब सवाल यह उठता है कि क्या पृष्ठभूमि छवि को तत्व के आकार को सीमित करने वाले क्षेत्र के ऊपरी बाएं कोने से दूर ले जाना संभव है। बेशक आप कर सकते हैं, और इस उद्देश्य के लिए एक अलग नियम है पृष्ठभूमि स्थिति:



CSS विनिर्देशन को देखते हुए, यह स्पष्ट हो जाता है कि डिफ़ॉल्ट पृष्ठभूमि छवि को Html तत्व के क्षेत्र के ऊपरी-बाएँ किनारे पर क्यों लगाया गया है। क्योंकि मान "0% 0%" पृष्ठभूमि स्थिति नियम के लिए डिफ़ॉल्ट है।

खैर, जब यह नियम किसी तत्व के लिए स्पष्ट रूप से निर्दिष्ट नहीं है (जैसा कि हमारे मामले में), तो ब्राउज़र डिफ़ॉल्ट रूप से विनिर्देश में स्वीकार किए गए मान का चयन करता है (ध्यान दें कि CSS में निर्देशांक अक्ष केवल क्षेत्र के ऊपरी बाएं किनारे से रिपोर्ट किए गए हैं तत्व)।

विनिर्देश से यह भी देखा जाता है कि दोनों सापेक्ष (प्रतिशत) और निरपेक्ष मान (उदाहरण के लिए) पृष्ठभूमि-स्थिति का उपयोग करके पृष्ठभूमि छवि को स्थिति के लिए इस्तेमाल किया जा सकता है। खैर, आप उन शब्दों का भी उपयोग कर सकते हैं जो कुछ संख्यात्मक मूल्यों के अनुरूप होंगे। लेकिन पहले बातें पहले।

पृष्ठभूमि छवि की स्थिति सेट करते समय निरपेक्ष इकाइयों का उपयोग करना पृष्ठभूमि की स्थिति में इसकी अंतिम स्थिति निर्धारित करने के लिए निम्नलिखित सिद्धांत हैं:

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

पृष्ठभूमि-छवि: url (https: //site/image/logo.png); बैकग्राउंड-रिपीट: नो-रिपीट; पृष्ठभूमि-स्थिति: 400px 25px;

कृपया ध्यान दें कि इस मामले में इसे व्यूपोर्ट के केंद्र से जोड़ा जाएगा, न कि इन पैराग्राफ के लिए आवंटित क्षेत्र के केंद्र पर। यह स्पष्ट है कि वास्तव में इस तरह की पृष्ठभूमि छवि की व्यवस्था के लिए आवेदन मिलने की संभावना नहीं है।

हालाँकि, यदि आप बॉडी या Html (यानी संपूर्ण वेब पेज को कवर करने वाले टैग्स) जैसे तत्वों के लिए एक निश्चित बैकग्राउंड पोजिशन सेट करते हैं, तो यह तस्वीर हमेशा व्यूपोर्ट में दिखाई देगी और यही वह है जो बैकग्राउंड-अटैचमेंट सीएसएस प्रॉपर्टी को ढूंढता है। आधुनिक ब्लॉक लेआउट।

क्या कुछ और है? प्रीफैब रूल बैकग्राउंड, जो आपको एक बोतल में ऊपर वर्णित सभी पांच नियमों को संयोजित करने की अनुमति देता है। इसके अलावा, संयुक्त संस्करण में सभी पांचों के मूल्यों का उपयोग किसी भी क्रम में और किसी भी मात्रा में किया जा सकता है (वे अद्वितीय हैं और ब्राउज़र उन्हें एक दूसरे के साथ भ्रमित नहीं करेगा)। कुछ भी जो आप स्पष्ट रूप से निर्दिष्ट नहीं करते हैं, ब्राउज़र डिफ़ॉल्ट मान के बराबर विचार करेगा।

पीएनजी) नहीं-दोहराएं 50%;

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

यदि कुछ तत्व के लिए आप केवल रंग से भरना चाहते हैं, और पृष्ठभूमि छवि के साथ परेशान नहीं करते हैं, तो आप इसके बजाय अच्छी तरह से कर सकते हैं:

पृष्ठभूमि-रंग: #FEFCDE

लिखो:

पृष्ठभूमि: #FEFCDE

संयुक्त नियम के अन्य सभी मूल्यों के लिए डिफ़ॉल्ट रूप से लिया जाएगा, और यही आपकी आवश्यकता है।

आप सौभाग्यशाली हों! जल्द ही आपको ब्लॉग साइट के पृष्ठों पर मिलते हैं

आपकी रुचि हो सकती है

सूची शैली (प्रकार, छवि, स्थिति) - एचटीएमएल कोड में सूचियों की उपस्थिति को अनुकूलित करने के लिए सीएसएस नियम एनटी-चाइल्ड स्यूडो-क्लास का उपयोग करके साइट पर तालिकाओं, सूचियों और अन्य एचटीएमएल तत्वों की पृष्ठभूमि के रंग का विकल्प कैसे सेट करें
स्थिति (पूर्ण, सापेक्ष और निश्चित) - सीएसएस में एचटीएमएल तत्वों की स्थिति के तरीके (नियम बाएं, दाएं, ऊपर और नीचे)
सीएसएस में फ्लोट और क्लियर - ब्लॉक लेआउट टूल्स
माउस कर्सर को बदलने के लिए जेड-इंडेक्स और सीएसएस कर्सर के साथ स्थिति
पैडिंग, मार्जिन और बॉर्डर - हमने सीएसएस में आंतरिक और बाहरी मार्जिन निर्धारित किया है, साथ ही सभी पक्षों के लिए सीमाएं (ऊपर, नीचे, बाएं, दाएं)
CSS में प्रदर्शन (ब्लॉक, कोई नहीं, इनलाइन) - वेब पेज पर एचटीएमएल तत्वों के प्रदर्शन का प्रकार सेट करें
सीएसएस प्राथमिकताएं और महत्वपूर्ण, चयनकर्ता संयोजन और समूहीकरण, कस्टम और लेखक शैलियों के साथ बढ़ावा देना
CSS - यह क्या है, स्टाइल कोड और लिंक का उपयोग करके HTML कोड से कैस्केडिंग स्टाइल शीट को कैसे जोड़ा जाता है
टैग, वर्ग (क्लास), आईडी और जेनेरिक के साथ-साथ आधुनिक सीएसएस में चयनकर्ताओं के लिए चयनकर्ता