CSS पृष्ठभूमि

पिछला पृष्ठ CSS निर्माण
अगला पृष्ठ CSS पाठ

CSS शुद्ध रंग को पृष्ठभूमि के रूप में लागू करने की अनुमति देता है, साथ ही पृष्ठभूमि चित्र का उपयोग करके काफी जटिल प्रभाव पैदा करने की भी अनुमति देता है。

CSS इस दृष्टि से HTML से बहुत अधिक क्षमता रखता है。

पृष्ठभूमि रंग

इस्तेमाल किया जा सकता है background-color गुणएलीमेंट के लिए पृष्ठभूमि रंग सेट करें। यह गुण किसी भी वैध रंग मूल्य को स्वीकार करता है।

इस नियम से एलीमेंट का पृष्ठभूमि रंग ग्रे रंग में सेट किया जाता है:

p {background-color: gray;}

यदि आप चाहते हैं कि पृष्ठभूमि रंग एलीमेंट के लिएकी टेक्स्ट से कम से कम बाहर फैले, तो कुछ अंतर-घाटी (padding) जोड़ें:

p {background-color: gray; padding: 20px;}

स्वयं को प्रयास करें

सभी एलीमेंट के लिए पृष्ठभूमि रंग सेट किया जा सकता है, यह body से लेकर em और a जैसे इनलाइन एलीमेंट तक है।

background-color को विरासत नहीं होता, उसका डिफ़ॉल्ट मूल्य transparent है. transparent का अर्थ है 'पारदर्शी'. अर्थात, यदि किसी एलीमेंट का पृष्ठभूमि रंग निर्दिष्ट नहीं किया गया है, तो पृष्ठभूमि पारदर्शी होगी, ताकि उसके पूर्ववर्ती एलीमेंट का पृष्ठभूमि दिखे।

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

चित्र को पृष्ठभूमि में रखने के लिए, इस्तेमाल करने की आवश्यकता है background-image एट्रिब्यूटbackground-image एट्रिब्यूट का मूलभूत मूल्य none है,जो कहता है कि पृष्ठभूमि पर कोई छवि नहीं है।

यदि पृष्ठभूमि छवि को सेट करना है,तो इस एट्रिब्यूट को एक URL मूल्य सेट करना होगा:

body {background-image: url(/i/eg_bg_04.gif);}

अधिकांश पृष्ठभूमि body एलीमेंट पर लगाई जाती है,हालांकि यह तक सीमित नहीं है।

नीचे का उदाहरण एक पैराग्राफ को पृष्ठभूमि लगाने के लिए है,जो दस्तावेज़ के अन्य हिस्सों पर पृष्ठभूमि नहीं लगाता:

p.flower {background-image: url(/i/eg_bg_03.gif);}

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

a.radio {background-image: url(/i/eg_bg_07.gif);}

स्वयं को प्रयास करें

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

इसके अलावा,background-image भी विरासत नहीं करता।वास्तव में,सभी पृष्ठभूमि एट्रिब्यूट विरासत नहीं करते।

पृष्ठभूमि टाइलिंग

यदि पृष्ठभूमि छवि को टाइल करने की जरूरत है,तो इसका उपयोग कर सकते हैं background-repeat एट्रिब्यूट

एट्रिब्यूट का मूल्य repeat पृष्ठभूमि छवि को आड़ा और ऊर्ध्व-स्थिति दोनों दिशाओं में टाइल करता है,जैसे पृष्ठभूमि छवि की आम प्रथा की तरह।repeat-x और repeat-y क्रमश: छवि को केवल आड़ा और ऊर्ध्व-स्थिति में टाइल करता है,no-repeat तो छवि को किसी भी दिशा में टाइल नहीं करता।

मूलभूत रूप से,पृष्ठभूमि छवि एक एलीमेंट के ऊपरी दायाँ कोने से शुरू होती है।नीचे का उदाहरण देखें:

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

स्वयं को प्रयास करें

पृष्ठभूमि स्थानांतरण

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

नीचे दिए उदाहरण में body एलीमेंट में एक पृष्ठभूमि छवि को केंद्रीत करना दिखाया गया है:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
  }

background-position 属性 के लिए बहुत सारे तरीके हैं।पहले,कुछ शब्दावली:top, bottom, left, right और center का उपयोग कर सकते हैं।आमतौर पर,ये शब्दावली जोड़े हुए होते हैं,लेकिन हमेशा ऐसा नहीं होता है।इसके अलावा,आकार की राशि,जैसे 100px या 5cm का उपयोग कर सकते हैं,अंत में प्रतिशत की राशि का उपयोग कर सकते हैं।विभिन्न प्रकार की राशियाँ पृष्ठभूमि छवि के स्थानांतरण के लिए थोड़ा अलग हैं।

关键字

图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。

根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。

如果只出现一个关键字，则认为另一个关键字是 center。

所以，如果希望每个段落的中部上方出现一个图像，只需声明如下：

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

下面是等价的位置关键字：

单一关键字	等价的关键字
center	center center
top	top center 或 center top
bottom	bottom center 或 center bottom
right	right center 或 center right
left	left center 或 center left

百分数值

百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这很容易：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

这会导致图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。

如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。

因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。

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

दूरी मान

दूरी मान एलिमेंट के आधार पट्टी के उच्च दायां कोण के साथ बिंदु को व्याख्या करती है। बिंदु इमेज के उच्च दायां कोण है।

जैसे, यदि मान 50px 100px है, तो इमेज के उच्च दायां कोण एलिमेंट के आधार पट्टी के उच्च दायां कोण से 50 पिक्सल दायां और 100 पिक्सल नीचे होगा:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

ध्यान दें कि यह शतक अनुक्रम के साथ अलग है, क्योंकि एक्सिस एक बार से दूसरे बार तक है। अर्थात, इमेज के उच्च दायां कोण और background-position घोषणा में निर्दिष्ट बिन्दु के साथ पूरी तरह से पूर्ण है।

पृष्ठभूमि संबंध

यदि दस्तावेज़ अधिक लंबा है, तो जब दस्तावेज़ नीचे घुमाया जाता है, तो पृष्ठभूमि इमेज भी घुमाती है। जब दस्तावेज़ इमेज के स्थान से घुमाया जाता है, तो इमेज गायब हो जाती है。

आप इस तरह background-attachment गुणइस घुमाने को रोकें। इस गुण के द्वारा, इमेज को दृश्यक्षेत्र के साथ स्थिर (fixed) घोषित किया जा सकता है, जिससे घुमाने से प्रभावित नहीं होती है:

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

स्वयं को प्रयास करें

background-attachment गुण का डिफ़ॉल्ट मान scroll है, अर्थात, डिफ़ॉल्ट में पृष्ठभूमि दस्तावेज़ के साथ घुमाती है।