कम जानकारी

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

मूल्य

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

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

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

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

ब्राउज़र्स

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

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

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

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

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

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, इस संपत्ति का समर्थन करते हैं।

पृष्ठभूमि छवि: | कोई नहीं; पृष्ठभूमि छवि: | कोई नहीं | वारिस; पृष्ठभूमि छवि: <фн-изображение> [ , <фн-изображение> ]*; <фн-изображение> = | कोई नहीं

विवरण

पृष्ठभूमि-छवि संपत्ति (अंग्रेजी "बैकग्राउंड इमेज" से - "बैकग्राउंड इमेज") एक तत्व की पृष्ठभूमि छवि सेट करता है.

ध्यान दें

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

उपयोग की शर्तें

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

जावास्क्रिप्ट

[वस्तु] .स्टाइल .backgroundImage \u003d "[मूल्य]";

ब्राउज़र का समर्थन

विशिष्टता

मूल्य

सभी मूल्य सीएसएस 1 सीएसएस 2.0 सीएसएस 2.1 सीएसएस 2.2 सीएसएस 3

कोई भी पृष्ठभूमि छवि नहीं दर्शाता है। url ( ) "Url (...)" के अंदर छवि URI स्ट्रिंग निर्दिष्ट करता है।

पृष्ठभूमि-छवि: url (myImage.png);

Url (" ")" Url (...) "के भीतर एक छवि URI स्ट्रिंग निर्दिष्ट करता है, और URI स्ट्रिंग को DUBLE QUOTE" "वर्णों के साथ निरूपित किया जाता है।

पृष्ठभूमि-छवि: url ("myImage.png");

इनहेरिट इंगित करता है कि तत्व को मूल तत्व के मापदंडों को विरासत में प्राप्त करना चाहिए।

प्रारंभिक मूल्य: "कोई नहीं"।

उपयोग उदाहरण

कोड सूचीकरण

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

कई पृष्ठभूमि छवियों के साथ दस्तावेज़।

> पृष्ठभूमि-छवि संपत्ति>

वेबसाइट डिजाइन एक पृष्ठभूमि के साथ शुरू होता है।

यह पृष्ठभूमि का रंग - संपत्ति लिखने के लिए सही होगा पीछे का रंग, सुरक्षा नेट के लिए, यदि चित्र लोड नहीं होता है। कोष्ठक में url () चित्रों के साथ फ़ोल्डर में पथ निर्दिष्ट करें।

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

"टाइलिंग" से छुटकारा पाने का एक सरल विकल्प एक बड़ी छवि का उपयोग करना है, कम से कम 1024 पीएक्स चौड़ा, ताकि यह पूरी स्क्रीन को भर दे। यह एक सहज बनावट खोजने के लिए भी एक अच्छा समाधान होगा, जब गुणा किया जाता है, तो चित्र एक पूरे के रूप में होगा।

पृष्ठभूमि को अधिक आकर्षक कैसे बनाया जाए?

भगवान का शुक्र है कि हमारे पास इसके लिए मददगार हैं:

• कोई दोहराने - दोहराने को अक्षम करें
• दोहराने-x - केवल क्षैतिज रूप से पैटर्न की पुनरावृत्ति
• दोहराने-y - पैटर्न की पुनरावृत्ति केवल लंबवत रूप से

उदाहरण के लिए:

ब्लॉग हेडर

यह एक पृष्ठभूमि बनावट है जो केवल क्षैतिज रूप से दोहराती है।

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

शीर्षक

दिए गए पोजिशनिंग के साथ नॉन-रिपिटिंग बैकग्राउंड का एक उदाहरण।

चित्र केवल एक बार प्रदर्शित होता है और दाईं ओर स्थित होता है।

पृष्ठभूमि के साथ पाठ की टक्कर से बचने के लिए दाहिने किनारे से इंडेंट को 200 px पर सेट किया गया है।

यदि हम चाहते हैं कि स्क्रीन को नीचे स्क्रॉल करते समय चित्र हमेशा दिखाई दे, तो हमें संपत्ति को ऊपर दिए गए कोड में जोड़ना होगा - पृष्ठभूमि-लगाव: निश्चित;

के बीच क्या अंतर है img तथा पृष्ठभूमि छवि?

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

बेशक, इसका मतलब यह नहीं है कि पृष्ठभूमि छवि अगर शरीर में डाल दिया तो काम नहीं करेगा एचटीएमएल-pages। लेकिन मैं दृढ़ता से सलाह देता हूं कि डिजाइन से जुड़ी हर चीज को अंदर ले जाया जाए सीएसएस... नतीजतन, हम एक साफ हो जाते हैं एचटीएमएल-code:

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

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