पारदर्शी सीएसएस छवि. HTML और CSS (अपारदर्शिता और RGBA प्रभाव) में एक पारदर्शी पृष्ठभूमि बनाना। मुझे ये नंबर कहां मिल सकते हैं?

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

अपारदर्शिता गुण

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

उदाहरण 1 दिखाता है कि अपारदर्शिता का उपयोग करके अर्ध-पारदर्शी ब्लॉक कैसे बनाया जाए।

उदाहरण 1: वेब पेज पर पृष्ठभूमि

HTML5 CSS3 IE 9+ Cr Op Sa Fx

अस्पष्टता

आरजीबीए

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

चावल। 1. आरजीबीए का उपयोग करने के लिए सिंटैक्स

उदाहरण 2 एप्लिकेशन दिखाता है आरजीबीए प्रारूपएक पारभासी पृष्ठभूमि बनाने के लिए.

उदाहरण 2. पारभासी पृष्ठभूमि

HTML5 CSS3 IE 9+ Cr Op Sa Fx

आरजीबीए

हॉब्स मनोविज्ञान के दृष्टिकोण से इस समस्या को उजागर करने वाले पहले लोगों में से एक थे।

इस उदाहरण का परिणाम चित्र में दिखाया गया है। 2. पृष्ठभूमि अपारदर्शिता 90% पर सेट है।

चावल। 2. पारभासी पृष्ठभूमि और अपारदर्शी पाठ

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

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

मैं देने का प्रयास करूंगा विभिन्न संयोजनगर्म चाबियाँ.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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