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

मैं पारदर्शिता कैसे निर्धारित करूं?

यदि हम वेब प्रौद्योगिकियों के ऐतिहासिक विकास के चश्मे के माध्यम से इस विषय पर विचार करते हैं, तो निम्नलिखित दृष्टिकोणों को प्रतिष्ठित किया जा सकता है:

• संपत्ति अस्पष्टता.
• का उपयोग करते हुए पीएनजी -चित्रों
• सिस्टम प्रारूप RGBA
• और अंत में, पुरातनता या चेकर छवियों।

सीएसएस संपत्ति अस्पष्टता

स्टाइल आवेदन सीएसएसगुण अस्पष्टता आपको उस तत्व की पारदर्शिता सेट करने की अनुमति देता है जिस पर इसे लागू किया जाता है। मान जिन्हें तर्क के रूप में उपयोग किया जा सकता है, वे 0 से 1 तक होते हैं।
आइए एक उदाहरण देखें।

< html> < head> < title> TODO एक उपाधि प्रदान करता है < meta charset= "UTF-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "css/style2.css" /> < body> < div class = " prozrachen " > आपका बहुत सारा पाठ होगा

/ * पेज की बॉडी के लिए बैकग्राउंड * / )। प्रोज़्रैचेन (पैडिंग: 10 पीएक्स; / * पाठ के लिए इंडेंटेशन * / पृष्ठभूमि: darkturquoise; / * पृष्ठभूमि का रंग सेट करें * / मार्जिन: 0 ऑटो; / * केंद्र को ब्लॉक करें * / चौड़ाई: 50%; / * ब्लॉक चौड़ाई सेट करें * / अपारदर्शिता: 0.7; / * सेट पारदर्शिता * / फ़ॉन्ट: 48px / 64px टाइम्स न्यू रोमन; पाठ-संरेखित करें: औचित्य; )

परिणामस्वरूप, हमें एक पारभासी ब्लॉक मिला:

जरूरी!!!

1. अस्पष्टतामान सीमा से लेता है: 0 (पूर्ण पारदर्शिता) - 1 (अपारदर्शी)।
2. क्रॉस-ब्राउज़र संगतता। में अर्थात सातवें संस्करण तक समावेशी अस्पष्टतासमर्थित नहीं। निम्नलिखित लाइन एक तत्व के समान प्रदर्शन को प्राप्त करने में मदद करेगी:

   फ़िल्टर: अल्फा (अपारदर्शिता \u003d 70);

   यह ध्यान में रखा जाना चाहिए कि संपत्ति फिल्टरमें अनुपस्थित एचटीएमएलविनिर्देशों, 1 से 100 तक मूल्यों को बदलता है और केवल तत्वों पर लागू किया जा सकता है:

   • पूर्ण स्थिति के साथ ( स्थिति: निरपेक्ष)
   • एक निश्चित रैखिक आयाम के साथ ( ऊँचाई या चौड़ाई).
3. पारदर्शिता की डिग्री बच्चों को विरासत में मिली है, जिससे बच्चे को अधिक पारदर्शी बनाया जा सकता है, लेकिन कम नहीं बनाया जाता है। यानी, ट्रांसलूसेंट बैकग्राउंड पर, CLEAR टेक्स्ट न बनाएं।

अंतिम बिंदु की सामग्री की बेहतर समझ के लिए, पिछले उदाहरण में, पाठ को सफेद पर सेट करें।

सफ़ेद रंग;

और माइक्रोस्कोप के तहत इस पर विचार करें:

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

पीएनजी छवियों का उपयोग करना

प्रारूप की एक दिलचस्प विशेषता पीएनजीयह है कि इसमें पारदर्शिता के 256 स्तर हैं। मुझे लगता है कि आपने विचार की ट्रेन पकड़ ली है, और शायद पहले से ही इस दृष्टिकोण के लिए एक एल्गोरिथ्म का निर्माण किया है। मुझे बस इसे आवाज देना है।

नतीजतन, हमें एक पारदर्शी पृष्ठभूमि और अपारदर्शी सामग्री के साथ एक ब्लॉक मिला:

जरूरी!!!

1. संपत्ति के विपरीत अस्पष्टतापारदर्शिता केवल पृष्ठभूमि के लिए निर्धारित है
2. क्रॉस-ब्राउज़र संगतता। लगभग सभी ब्राउज़रों में काम करता है और यह एक प्लस है। लेकिन पारदर्शिता पीएनजीमें समर्थित नहीं है IE6... यदि आप ऐसी पुरातनता के लिए अपनी साइट का अनुकूलन कर रहे हैं, तो आपको अन्य तरीकों या लिपियों का उपयोग करना होगा।
3. जब आप चित्रों का प्रदर्शन बंद कर देते हैं, तो आपकी पृष्ठभूमि गायब हो जाएगी (मोबाइल उपकरणों पर प्रदर्शन का अनुकूलन करते समय इस बिंदु को ध्यान में रखें, क्योंकि असीमित इंटरनेट हमेशा हाथ में नहीं होता है)।
4. रंग और / या पारदर्शिता को बदलने के लिए, आपको एक नई छवि बनाने और इसे सर्वर पर अपलोड करने की आवश्यकता है।

RGBA प्रणाली प्रारूप

पृष्ठभूमि पारदर्शिता को बदलने के सबसे आधुनिक तरीकों में से एक प्रणाली का उपयोग है RGBA.

RGBA- तीन मानक चैनलों का उपयोग करके रंग प्रतिनिधित्व प्रणाली आरजीबी(लाल, हरा, नीला), और चौथा, तथाकथित अल्फा-अनुशासन पारदर्शिता की डिग्री का वर्णन करता है।

पृष्ठभूमि: आरजीबीए (आर, जी, बी, ए);

उदाहरण में हम पहले से ही जानते हैं, सामग्री को इसमें बदलें सीएसएसनिम्नलिखित के लिए फ़ाइल:

शरीर (पृष्ठभूमि: url (./ vaden- pro- logo। png); / * वॉलपेपर * / )। प्रोज़्रचेन (पैडिंग: 10 पीएक्स; पृष्ठभूमि: आरजीबीए (0, 206, 209, 0.7); मार्जिन: 0 ऑटो; चौड़ाई: 50%; फ़ॉन्ट: 48 पीएक्स / 64 पीएक्स टाइम्स न्यू रोमन; रंग: सफ़ेद; पाठ- संरेखित करें: औचित्यपूर्ण;)

जरूरी!!!

1. संपत्ति के विपरीत अस्पष्टतापारदर्शिता केवल पृष्ठभूमि के लिए निर्धारित है
2. विधि के विपरीत पीएनजीचित्र, रंग या पारदर्शिता की डिग्री को बदलने के लिए, हमें केवल मूल्यों को बदलने की आवश्यकता है rGBA.
3. क्रॉस-ब्राउज़र संगतता। सभी आधुनिक ब्राउज़रों में काम करता है (शुरुआत के साथ) IE9, OP10, FX3,Sf3.2पुराने ब्राउज़रों को या तो पारदर्शिता का उपयोग करना होगा या उपयोग करना होगा अस्पष्टता, png तरीकों।

चेकर छवियों, या इतिहास के लिए सम्मान

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

ऐसी तस्वीर लगाने के परिणामस्वरूप, एक छद्म पारदर्शी पृष्ठभूमि के रूप में प्राप्त किया गया था।

जरूरी!!!

1. जब इस तरह की पृष्ठभूमि के खिलाफ पाठ को देखते हैं, तो आंखें जल्दी से थक सकती हैं (विशेषकर जब स्क्रॉल नीचे दबाएं)।
2. अन्य मामलों में, एप्लिकेशन सुविधाएँ "PNG- चित्र" विधि के समान हैं।

संक्षेप में बताइए?

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

इस पाठ में, हम ऐसे विश्लेषण करेंगे सीएसएस गुण - अस्पष्टता तथा RGBA... संपत्ति अस्पष्टता केवल तत्वों की पारदर्शिता और कार्य के लिए जिम्मेदार है RGBA - रंग और पारदर्शिता के लिए, यदि आप अल्फा चैनल के पारदर्शिता मूल्य को निर्दिष्ट करते हैं।

सीएसएस अस्पष्टता

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

स्क्रीनशॉट में, आप स्पष्ट रूप से देख सकते हैं कि काला पाठ नीले रंग की पृष्ठभूमि के समान अर्ध-पारदर्शी हो गया है।

Div (
पृष्ठभूमि: url (चित्र / yourimage.jpg); / * पृष्ठभूमि चित्र * /
चौड़ाई: 750px;
ऊंचाई: 100 पीएक्स;
मार्जिन: ऑटो;
}
।नीला (
पृष्ठभूमि: # 027av4; / * अर्ध-पारदर्शी पृष्ठभूमि रंग * /
अपारदर्शिता: 0.3; / * पृष्ठभूमि पारभासी मूल्य * /
ऊंचाई: 70 पीएक्स;
}
h1 (
गद्दी: 6 पीएक्स;
फ़ॉन्ट-परिवार: एरियल ब्लैक;
फ़ॉन्ट-वजन: बोल्डर;
फ़ॉन्ट-आकार: 50 पीएक्स;
}

RGBA प्रारूप में CSS पारदर्शिता

रिकॉर्डिंग रंग के लिए प्रारूप RGBA, संपत्ति का अधिक आधुनिक विकल्प है अस्पष्टता. आर (लाल), जी (हरा), बी (नीला) - का अर्थ है: लाल, हरा, नीला। आखिरी पत्र ए - का अर्थ है अल्फा चैनल, जो पारदर्शिता सेट करता है। RGBA भिन्न अस्पष्टता बच्चों को प्रभावित नहीं करता है।

अब चलो हमारे उदाहरण का उपयोग करके देखें RGBA... आइए इन पंक्तियों को शैलियों में बदलें।

पृष्ठभूमि: ## 027av4; /* पीछे का रंग */
अपारदर्शिता: 0.3; / * पृष्ठभूमि पारभासी मूल्य * /

अगले एक लाइन के लिए

पृष्ठभूमि: आरजीबीए (2, 127, 212, 0.3);

जैसा कि आप देख सकते हैं, 0.3 का पारदर्शिता मान दोनों विधियों के लिए समान है।

RGBA के साथ उदाहरण के परिणाम:

दूसरा स्क्रीनशॉट पहले वाले से काफी बेहतर दिखता है।

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

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

उत्पादन

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

सामग्री के बेहतर समेकन और अधिक स्पष्टता के लिए, मेरा सुझाव है कि आप इससे गुजरें।

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

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

पृष्ठभूमि-रंग विशेषता

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

पृष्ठभूमि-स्थिति की विशेषता

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

बॉडी (बैकग्राउंड-पोज़िशन: राइट सेंटर;) - इस उदाहरण में, बैकग्राउंड पेज के दाईं ओर स्थित होगा, जिसमें इमेज के नीचे और ऊपर की दूरी समान होगी।

पृष्ठभूमि के आकार की विशेषता

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

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

पृष्ठभूमि-अनुलग्नक विशेषता

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

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

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

शरीर (पृष्ठभूमि-लगाव तय)।

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

पृष्ठभूमि-मूल विशेषता

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

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

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

पृष्ठभूमि-दोहराने की विशेषता

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

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

विशेषता का उपयोग करने का एक उदाहरण:

बॉडी (बैकग्राउंड-रिपीट: नो-रिपीट रिपीट) - इसी तरह बैकग्राउंड-रिपीट: रिपीट-वाई।

CSS3 में, कॉमा द्वारा अलग किए गए मापदंडों को सूचीबद्ध करके कई छवियों के लिए मान सेट करना संभव है।

पृष्ठभूमि-क्लिप विशेषता

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

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

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

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

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

अपारदर्शिता और फ़िल्टर विशेषताएँ

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

.block (पृष्ठभूमि-छवि: url (img.png); अपारदर्शिता: .3;)।

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

.block (पृष्ठभूमि-छवि: url (img.png); फ़िल्टर: अल्फ़ा (अस्पष्टता \u003d 30);)।

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

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

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

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

Rgba और hsla के बिना पारदर्शी पृष्ठभूमि

1. पारभासी PNG ... सबसे अच्छा विकल्प, क्योंकि यह अब तक का सबसे क्रॉस-ब्राउज़र और सरलतम है। ब्लॉक को पारदर्शी बनाने के लिए, एक-पिक्सेल अर्ध-पारदर्शी पीएनजी की आवश्यकता होती है, जो ब्लॉक की पृष्ठभूमि के रूप में सेट की जाती है। और बस यही।
   
   नुकसान: केवल एक आवश्यक है।
2. अस्पष्टता के माध्यम से पारदर्शिता ... ब्लॉक पारदर्शिता सेट क्रॉस-ब्राउज़र इस प्रकार है:

   अपारदर्शिता: 0.5;
   फ़िल्टर: अल्फा (अपारदर्शिता \u003d 50);
   -मोज़-अपारदर्शिता: 0.5;

   जहां ०.५ और ५० में ५०% पारदर्शिता है। लेकिन एक समस्या है। यदि हम इस तरह के पारभासी के लिए वांछित ब्लॉक सेट करते हैं, तो हम ऊपर की छवि में उस तीसरे विकल्प को देखेंगे - ब्लॉक की सामग्री भी पारभासी हो जाएगी। हालांकि, एक रास्ता है - मुक्त स्थिति, जिसकी मदद से पाठ के ब्लॉक के नीचे एक और ब्लॉक रखा जाता है, जिस पर पारभासी सेट किया जाता है।

   आइए एक उदाहरण देखें। नारंगी चित्र के साथ ब्लॉक को बॉडी टैग होने दें, कंटेनर में टेक्स्ट और पारदर्शी बैकग्राउंड दोनों होते हैं #block_bg, जिसके अंदर ट्रांसलूसेंट बैकग्राउंड के साथ ब्लॉक #block_transparent होता है, और टेक्स्ट के साथ ब्लॉक #27_text होता है।

   
   

   
   

   पाठ पाठ पाठ, कई, कई पाठ

   
   

   शरीर (पृष्ठभूमि: url (image.jpg);)
   #block_bg (
   स्थिति: रिश्तेदार;
   छिपा हुआ सैलाब;
   चौड़ाई: 400px;
   गद्दी: 10 पीएक्स;
   }
   #block_text (स्थिति: सापेक्ष; z- अनुक्रमणिका: 100;)
   #block_transparent (
   अपारदर्शिता: 0.5;
   फ़िल्टर: अल्फा (अपारदर्शिता \u003d 50);
   -मोज़-अपारदर्शिता: 0.5;
   पृष्ठभूमि: #fff;
   स्थिति: निरपेक्ष;
   शीर्ष: 0;
   बायां: 0;
   z-index: 90;
   ऊंचाई: 5000 पीएक्स;
   चौड़ाई: 400px;
   }

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

rgb और hsl, rgba और hsla - CSS3 के गुण

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

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

आरजीबी और आरजीबीए

आरजीबी और आरजीबीए के साथ शुरू करते हैं। R, g, b मान 0 से 255 या 0% से 100% तक सेट किए जा सकते हैं। एक (अल्फा, पारदर्शिता) मान 0 से 1 तक मापा जाता है (एक बिंदु - 0.4, 0.7, आदि के माध्यम से भिन्नात्मक मान निर्दिष्ट किए जाते हैं)। यदि r, g, और b ऐसे मानों के लिए सेट किए गए हैं जो उनकी मान्य सीमा (उदाहरण के लिए, 300 या 110% या -5) से अधिक हैं, तो वे निकटतम मान्य मान में सिकुड़ जाएंगे।

आइए पृष्ठभूमि की संपत्ति को एक उदाहरण के रूप में देखें (हालांकि जो लोग रंग या सीमा ले सकते हैं)।

पृष्ठभूमि: आरजीबी (0, 0, 255); / * शुद्ध नीला * /
पृष्ठभूमि: आरजीबी (100%, 50%, 0%); / * शुद्ध नीला * /
पृष्ठभूमि: आरजीबी (10, 145, 500); / * को 10, 145, 255 * / के रूप में मान्यता दी जाएगी
पृष्ठभूमि: आरजीबीए (10, 145, 255, 1); / * पिछले * के समान ही /
पृष्ठभूमि: आरजीबीए (100, 50, 255, 0.1); / * बकाइन की बहुत पारदर्शी छाया * /

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

hsl और hsla

और hsl और hsla के बारे में कुछ शब्द। आरजीबी और आरजीबीए के लिए उसी तरह का मान निर्धारित किया गया है, लेकिन पहले तीन मापदंडों के साथ, स्थिति थोड़ी अलग है। h 0 से 360 तक, और s और l 0% से 100% तक होता है।

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

आवश्यक रंग का अनुमान लगाने के लिए, एक छाया का चयन करें, फिर अनुमान करें, रंग संतृप्ति (जहां 0% एक असंतृप्त रंग है (ग्रे की छाया), और 100% सबसे संतृप्ति है) और इसकी लपट (0% - इसके साथ, रंग हमेशा काला होगा, और साथ में 100% - सफेद)। उपरोक्त के आधार पर, चित्र 100% संतृप्ति और 50% लपट पर टन को दर्शाता है।

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

और सिर्फ एक दो उदाहरण

पृष्ठभूमि: एचएसएल (180, 100%, 50%); / * गहरा नीला * /
पृष्ठभूमि: hsla (140, 50%, 30%, 0.5); / * पारभासी, शायद ही ध्यान देने योग्य है कि हरे रंग की छाया * /

नुकसान: सभी 4 गुण गधे और पुराने ब्राउज़रों द्वारा समर्थित नहीं हैं।

समापन

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

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

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

मैं आपको विभिन्न कीबोर्ड शॉर्टकट देने की कोशिश करूंगा।

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

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

संपादक में वांछित छवि खोलें। अब लेयर के लिए एक पारदर्शी बैकग्राउंड बनाते हैं। "परत" विंडो में, अतिरिक्त परत पर डबल-क्लिक करें - इसके विपरीत एक लॉक होगा। "न्यू लेयर" विंडो खुल जाएगी, इसमें "ओके" पर क्लिक करें। उसके बाद, ताला गायब हो जाएगा।

"मैजिक वैंड" टूल का चयन करें। प्रॉपर्टी बार में संवेदनशीलता स्तर निर्दिष्ट करें, यह समझने के लिए कि यह कैसे काम करता है, विभिन्न मानों को असाइन करें, उदाहरण के लिए 20 और 100. चित्र को अचयनित करने के लिए, "Ctrl + D" दबाएं।

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

अब, पृष्ठभूमि के बजाय, एक बिसात - इसका मतलब है कि हम सफेद पृष्ठभूमि को पारदर्शी बनाने में कामयाब रहे। चयन हटाएं - "Ctrl + D"।

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

इस स्थिति में, हम त्वरित चयन उपकरण का उपयोग करेंगे। हम थोड़ी देरी के साथ बाईं माउस बटन के साथ जादू की छड़ी पर क्लिक करते हैं और मेनू से वांछित उपकरण का चयन करते हैं।

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

परिणाम देखने के लिए "Q" दबाएं। छवि के जो हिस्से पारदर्शी बनेंगे उन्हें गुलाबी रंग में हाइलाइट किया जाएगा।

"Ctrl + C" दबाकर चयनित क्षेत्रों की प्रतिलिपि बनाएँ। अगला, पारदर्शी पृष्ठभूमि के साथ एक नई फ़ाइल, "Ctrl + N" बनाएं।

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

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

सीएसएस पृष्ठभूमि पारदर्शिता

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

1. सीएसएस अस्पष्टता पृष्ठभूमि पारदर्शिता के लिए संपत्ति

CSS में एक अस्पष्टता गुण है, जिसके साथ आप पृष्ठभूमि सहित छवियों, ग्रंथों की पारदर्शिता निर्धारित कर सकते हैं।

पारदर्शिता केवल 0.0 से 1.0 तक एक वास्तविक संख्या निर्दिष्ट करके निर्धारित की जाती है। संख्या जितनी कम होगी, वस्तु उतनी ही कम दिखाई देगी।

अपारदर्शिता: 0.5; // पारभासी अपारदर्शिता: 0.2; // ऑब्जेक्ट केवल 20% अस्पष्टता पर दिखाई देता है: 0.8; // ऑब्जेक्ट केवल 80% पर दिखाई देता है

आइए अस्पष्टता संपत्ति के साथ एक उदाहरण देखें।

पाठ भी पारदर्शी है