सीएसएस पृष्ठभूमि पारदर्शिता। पारदर्शी पृष्ठभूमि या सीएसएस के साथ पाठ

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

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

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

सीएसएस में, पृष्ठभूमि रंग एक हेक्स कोड, रंग नाम या आरजीबी प्रविष्टि का उपयोग कर: कई मायनों में सेट किया जा सकता। CSS3 में यह RGBA साथ आरजीबी रिकॉर्डिंग विकल्प के बजाय का उपयोग करना संभव हो गया।

पृष्ठभूमि रंग: # FFDAB9 हेक्स रंग कोड जाली के बाद संपत्ति में दर्ज की गई है। इस प्रविष्टि में पात्रों ही जोड़े हैं, तो कोड आमतौर पर एक छोटे से कटौती है: # ccff00 # cf0 के रूप में लिखा जा सकता है:

शरीर {पृष्ठभूमि का रंग: # cf0 ;}।

नाम सबसे आकर्षक रंगों में भी, है। उदाहरण के लिए, मानक लाल और सफेद आप NavajoWhite (#FFDEAD) या Honeydew2 (# E0EEE0) का उपयोग कर सकते के अलावा:

शरीर {पृष्ठभूमि रंग: बैंगनी; }।

दूसरा विकल्प आरजीबी है या RGBA प्रविष्टि आप न केवल रंग, लेकिन यह भी सीएसएस पृष्ठभूमि की पारदर्शिता को निर्दिष्ट करने की अनुमति देता है, लेकिन विधि केवल IE संस्करण 9 से अधिक उम्र में काम करता है। अन्य ब्राउज़रों पारदर्शिता के साथ सामान्य संस्करण को पहचानते हैं। W3C मानकों के अनुसार यह अभी भी अधिक सामान्य आरजीबी के बजाय RGBA उपयोग करने के लिए बेहतर है।

RGBA पृष्ठभूमि में अंतिम मान और 1 (अपारदर्शी) 0 (पारदर्शी) से अस्पष्टता सेट।

कुछ असामान्य मान नहीं होता। पृष्ठभूमि रंग एचएसएल और HSLA का उपयोग कर सेट किया जा सकता। दोनों CSS3 में जोड़ा गया था, और इसलिए आईई संस्करण 9 या उच्चतर द्वारा समर्थित नहीं हैं। Embodiments समान RGB या RGBA, केवल किसी अन्य प्रारूप में: ह्यू (छाया - रंग पहिया पर मूल्य, डिग्री में दी गई है), सैच्युरेट (संतृप्ति - एक प्रतिशत के रूप रंग की तीव्रता, 0 से 100 तक), लपट (हल्कापन - चमक, ठीक उसी प्रकार मापा पैरामीटर सैच्युरेट )।

गुण पृष्ठभूमि छवि

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

{पृष्ठभूमि शरीर की छवि: यूआरएल (bg1.png), यूआरएल (bg2.png)}।

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

गुण पृष्ठभूमि स्थिति

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

शरीर {पृष्ठभूमि स्थिति: सही केंद्र ;} - इस उदाहरण में, पैटर्न पेज, एक ही करने के लिए छवि दूरी के ऊपर और नीचे के दाईं ओर स्थित होगा।

गुण पृष्ठभूमि आकार

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

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

गुण पृष्ठभूमि लगाव

यह विशेषता पृष्ठभूमि छवियों स्क्रॉल करते समय के व्यवहार निर्दिष्ट करता है। इसलिए, यह 3 मूल्यों (इनहेरिट, गुण इस लेख में चर्चा के सभी के लिए कुल को छोड़कर) ले जा सकते हैं:

• निश्चित - निर्धारित की पृष्ठभूमि पर चित्र बनाता है;
• स्क्रॉल - तत्वों के बाकी के साथ पृष्ठभूमि स्क्रॉल;
• स्थानीय - यदि स्क्रॉल सामग्री है पृष्ठभूमि पर छवि स्क्रॉल किया गया है। पृष्ठभूमि है कि फ्रेम की सामग्री को परे चला जाता है तय हो गई है।

उपयोग का उदाहरण:

शरीर {पृष्ठभूमि लगाव तय}।

वर्तमान में, फ़ायरफ़ॉक्स पिछले संपत्ति (स्थानीय) का समर्थन नहीं करता।

गुण पृष्ठभूमि मूल के

यह विशेषता पोजीशनिंग तत्व के लिए जिम्मेदार है। प्रारंभिक ब्राउज़रों उपसर्गों के उपयोग की आवश्यकता। संपत्ति ही तीन पैरामीटर दिया गया है:

• गद्दी-बॉक्स बढ़त पैटर्न के लिए किस स्थिति में है, जबकि खाते में फ्रेम की मोटाई लेने;
• सीमा-बॉक्स गुण है कि में पिछले सीमा रेखा हो सकता है से अलग पूरी तरह से या आंशिक रूप से पैटर्न ओवरलैप;
• सामग्री बॉक्स स्थिति छवि अपनी सामग्री pryavyazyvaya।

आप एक से अधिक मान निर्दिष्ट करते हैं, तो ब्राउज़र अपने तरीके से प्रतिक्रिया कर सकते हैं: फ़ायरफ़ॉक्स और ओपेरा केवल पहला विकल्प देखते हैं।

गुण पृष्ठभूमि दोहराने

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

• कोई दोहराने - छवि केवल एक संस्करण में एक पृष्ठ पर प्रकट होता है;
• दोहराने - पृष्ठभूमि x और y में दोहराया जाता है;
• दोहराने-x - केवल क्षैतिज;
• दोहराने-y - केवल खड़ी;
• अंतरिक्ष - पृष्ठभूमि दोहराया है, लेकिन अगर अंतरिक्ष चित्रों के बीच में भरने के लिए असंभव है खाली दिखाई देते हैं;
• दौर - छवि मापा जाता है, अगर यह पूरी चित्रों का पूरे क्षेत्र को भरने नहीं करता है।

विशेषताओं के उदाहरण:

शरीर {पृष्ठभूमि दोहराने: नहीं- दोहराने दोहराने} - समान पृष्ठभूमि दोहराने: दोहराने-y।

CSS3 में एक से अधिक चित्रों के लिए मूल्यों जब पैरामीटर, अल्पविराम के द्वारा अलग लिस्टिंग निर्दिष्ट कर सकता है।

गुण पृष्ठभूमि क्लिप

यह विशेषता सीमाओं के तहत पृष्ठभूमि के व्यवहार को परिभाषित करता है (उदाहरण के लिए, बिंदीदार फ्रेम के मामले में):

• गद्दी-बॉक्स - पृष्ठभूमि ब्लॉक के इंटीरियर में दिखाया गया है;
• सीमा-बॉक्स - छवि ढांचे के तहत आता है,
• सामग्री बॉक्स - पृष्ठभूमि पर केवल चित्र सामग्री में दिखाए जाएंगे।

उपयोग का उदाहरण:

शरीर {पृष्ठभूमि क्लिप: सामग्री- बॉक्स;}।

क्रोम और सफारी -webkit- उपसर्ग की आवश्यकता है।

अपारदर्शिता गुण और फिल्टर

अस्पष्टता विशेषता आप पृष्ठभूमि की पारदर्शिता स्थापित करने के लिए अनुमति देता है - सीएसएस संपत्ति सभी ब्राउज़रों में काम करेंगे। मान 0.0 से 1.0 समावेशी करने के लिए सीमा पर स्थित है। इस मामले में, आप सीएसएस पृष्ठभूमि की पारदर्शिता सेट कर सकते हैं 0.3 के बजाय कोई पूर्णांक मान .3 लिखने के लिए पर्याप्त है:

.block {पृष्ठभूमि छवि: यूआरएल ( img.png); अस्पष्टता: .3;}।

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

.block {पृष्ठभूमि छवि: यूआरएल ( img.png); फिल्टर: अल्फा (अस्पष्टता = 30)}।

इस मामले में, अस्पष्टता मूल्य के बीच 0 और 100 के नोट सेट कर दिया जाता है कि अस्पष्टता RGBA विरासत के माध्यम से विभिन्न पारदर्शिता सेटिंग्स विशेषता: जब अस्पष्टता का उपयोग कर पृष्ठभूमि बन जाता है स्पष्ट नहीं केवल, लेकिन यह भी इकाई के अंदर सभी तत्वों।

हमेशा सीआईएस ब्राउज़र और अन्य सभी देशों के लिए अपने उपयोग के आंकड़े पर नजर रखने के। सभी डीटीपी की सबसे बड़ी समस्या - IE के पुराने संस्करणों, वे आपको पूर्ण सीमा तक CSS3 के उपयोग करने की अनुमति नहीं है। लेआउट में विशेष सेवाओं है कि जाँच आपके ब्राउज़र किसी भी सीएसएस संपत्ति का समर्थन करता है कि क्या उपयोग करने के लिए मत भूलना। आप ब्राउज़र के पुराने संस्करणों को स्थापित नहीं कर सकते हैं, एक सेवा है जो ऑनलाइन एकाधिक ब्राउज़र में साइट का काम की जाँच करेगा पाते हैं।