सीएसएस - पारदर्शी ब्लॉक में पारदर्शिता कैसे सेट करें। सीएसएस पारदर्शिता - क्रॉस-ब्राउज़र समाधान तत्व पारदर्शिता को सुचारू रूप से बदल रहा है

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

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

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

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

HTML 5 CSS 3 IE 9 अपारदर्शिता निकाय (पृष्ठभूमि: url(images/cat.jpg); ) div (अस्पष्टता: 0.6; पृष्ठभूमि: #fc0; /* पृष्ठभूमि रंग */ पैडिंग: 5px; /* पाठ के चारों ओर मार्जिन */) इंटरनेट पर वेबसाइटों का निर्माण एवं प्रचार-प्रसार

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

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

अर्ध-पारदर्शी पृष्ठभूमि HTML 5 CSS 3 IE 9 आरजीबीए बॉडी (पृष्ठभूमि: url(images/cat.jpg); ) div (पृष्ठभूमि: rgba(0, 170, 238, 0.4); /* पृष्ठभूमि रंग */ रंग: #fff ; / * टेक्स्ट का रंग */ पैडिंग: 5px; /* टेक्स्ट के चारों ओर मार्जिन */ ) इंटरनेट पर वेबसाइटों का निर्माण और प्रचार। पृष्ठभूमि अपारदर्शिता 90% पर सेट है - अर्ध-पारदर्शी पृष्ठभूमि और अपारदर्शी पाठ।

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

सीएसएस में अपारदर्शिता संपत्ति का सिंटैक्स इस तरह दिखता है:

चयनकर्ता (अस्पष्टता: 1; ) चयनकर्ता (अस्पष्टता: 0; ) चयनकर्ता (अस्पष्टता: 0.4; )

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

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

यदि संपत्ति का मूल्य गैर-शून्य है, तो वास्तविक पारदर्शिता की गणना कुछ ऊपरी सीमा के प्रतिशत के रूप में की जाएगी। सामान्य स्थिति में, अपारदर्शिता: 1 तत्व की पूर्ण अपारदर्शिता निर्धारित करती है।

हालाँकि, यदि तत्व में एक अभिभावक है जिसकी पारदर्शिता एक के अलावा अन्य है, तो गणना बदल जाती है। कोई वंशज अपने किसी भी पूर्वज से "कम पारदर्शी" नहीं हो सकता। पैरेंट ब्लॉक की अपारदर्शिता सीएसएस संपत्ति का मूल्य चाइल्ड नोड की अपारदर्शिता ऊपरी सीमा बन जाता है।

अभिभावक (अस्पष्टता: 0.7; ) बच्चा (अस्पष्टता: 1; )

इस स्थिति में, चाइल्ड तत्व 30% पारदर्शी होगा, भले ही अपारदर्शिता मान एक हो।

उदाहरण 1: पारभासी। यह आवश्यक है कि ब्लॉक की मुख्य पृष्ठभूमि लक्ष्य तत्व के नीचे दिखाई दे।

लक्ष्य (पृष्ठभूमि: काला; अस्पष्टता: 0.5;)

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

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

लक्ष्य (अस्पष्टता: 0.2; ) .लक्ष्य: होवर (अस्पष्टता: 1; )

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

किसी स्क्रिप्ट से पारदर्शिता तक पहुँचने के लिए, आपको किसी विशिष्ट तत्व के स्टाइल ऑब्जेक्ट तक पहुँचने की आवश्यकता है।

// वर्तमान पारदर्शिता मान प्राप्त करना var opacity = element.style.opacity; // एक नया मान element.style.opacity = 0.4 सेट करना;

सीएसएस ट्रांज़िशन प्रॉपर्टी का उपयोग करके किसी ब्लॉक को आसानी से गायब किया जा सकता है:

तत्व (अपारदर्शिता: 0.1; संक्रमण: अपारदर्शिता 1000ms; ) तत्व: होवर (अपारदर्शिता: 0.8; संक्रमण: अपारदर्शिता 2000ms; )

अब तत्व नोड, जब माउस से घुमाया जाता है, एक सेकंड के भीतर पारदर्शिता को 10 से 80% तक बदल देगा, और जब कर्सर चला जाता है, तो यह दो सेकंड के भीतर अपने मूल मूल्य पर मंद हो जाएगा।

संक्रमण तंत्र के साथ संयोजन में सीएसएस अपारदर्शिता संपत्ति आपको सुंदर प्रभाव बनाने की अनुमति देती है।

CSS में अपारदर्शिता तंत्र की मुख्य सूक्ष्मताएँ:

• इसका प्रभाव न केवल ब्लॉक की पृष्ठभूमि तक, बल्कि इसकी पाठ्य सामग्री तक भी फैलता है, जिसे अधिमानतः स्पष्ट छोड़ दिया जाता है;
• बाल तत्व अपने मूल तत्वों से कम पारदर्शी नहीं हो सकते।

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

/* 06.07.2006 */

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

सहजीवन से मेरा तात्पर्य विभिन्न शैलियों के संयोजन से है विभिन्न ब्राउज़रएक में सीएसएस नियमवांछित प्रभाव प्राप्त करने के लिए, अर्थात् क्रॉस-ब्राउज़र अनुकूलता लागू करने के लिए.

फ़िल्टर:प्रोगिड:DXImageTransform.Microsoft.Alpha(अस्पष्टता=50); /* आईई 5.5+*/ -मोज़-अस्पष्टता: 0.5; /* मोज़िला 1.6 और नीचे */ -khtml-अस्पष्टता: 0.5; /* कॉन्करर 3.1, सफ़ारी 1.1 */ /* CSS3 - मोज़िला 1.7बी +, फ़ायरफ़ॉक्स 0.9 +, सफ़ारी 1.2+, ओपेरा 9 */

वास्तव में, IE5.5+ और CSS3 की अपारदर्शिता को समझने वाले ब्राउज़र के लिए पहले और आखिरी नियमों की आवश्यकता होती है, और बीच के दो नियम स्पष्ट रूप से कोई फर्क नहीं डालते हैं, लेकिन वे वास्तव में हस्तक्षेप भी नहीं करते हैं (खुद तय करें) क्या आपको उनकी आवश्यकता है)।

आइए अब ऊपर वर्णित विभिन्न ब्राउज़रों की विशेषताओं को ध्यान में रखते हुए एक स्क्रिप्ट के माध्यम से पारदर्शिता सेट करने का प्रयास करें।

फ़ंक्शन setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) return; // यदि निर्दिष्ट आईडी या ब्राउज़र के साथ कोई तत्व नहीं है पारदर्शिता को नियंत्रित करने के ज्ञात तरीकों में से किसी एक का समर्थन नहीं करता है यदि (opacityProp=='filter'') // इंटरनेट एक्सप्लोडर 5.5+ (nOpacity *= 100; // यदि पारदर्शिता पहले से ही सेट है, तो इसे फ़िल्टर संग्रह के माध्यम से बदलें , अन्यथा style.filter var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity = nOpacity के माध्यम से पारदर्शिता जोड़ें; progid:DXImageTransform.Microsoft.Alpha(opacity ='+nOpacity+')'; // अन्य फ़िल्टर को अधिलेखित न करने के लिए, '+=' का उपयोग करें) अन्यथा // अन्य ब्राउज़र elem.style = nOpacity; ) फ़ंक्शन getOpacityProperty() ( यदि (typeof document.body.style.opacity == "string") // CSS3 अनुरूप (Moz 1.7+, Safari 1.2+, ओपेरा 9) रिटर्न "अपारदर्शिता"; अन्यथा यदि (typeof document.body.style.MozOpacity == "string") // मोज़िला 1.6 और इससे पहले, फ़ायरफ़ॉक्स 0.8 रिटर्न "MozOpacity"; अन्यथा यदि (typeof document.body.style.KhtmlOpacity == "string") // कॉन्करर 3.1, Safari 1.1 रिटर्न "KhtmlOpacity"; अन्यथा यदि (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // इंटरनेट एक्सप्लोडर 5.5+ रिटर्न "फ़िल्टर"; विवरण झूठा है; //कोई पारदर्शिता नहीं)

फ़ंक्शन दो तर्क लेता है: sElemId - तत्व आईडी, nOpacity - वास्तविक संख्या CSS3 शैली की अपारदर्शिता में 0.0 से 1.0 तक पारदर्शिता स्थापित करना।

मुझे लगता है कि setElementOpacity फ़ंक्शन कोड के IE भाग को समझाना उचित है।

वर ओअल्फ़ा = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; यदि (oAlpha) oAlpha.opacity = nOpacity; अन्यथा elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity='+nOpacity+'");

किसी को आश्चर्य हो सकता है कि क्यों न संपत्ति elem.style.filter = "..." को (=) निर्दिष्ट करके पारदर्शिता स्थापित की जाए; ? फ़िल्टर प्रॉपर्टी को स्ट्रिंग के अंत में जोड़ने के लिए "+=" का उपयोग क्यों किया जाता है? उत्तर सरल है, ताकि अन्य फ़िल्टर को "ओवरराइट" न किया जा सके। लेकिन साथ ही, यदि आप दूसरी बार इस तरह से फ़िल्टर जोड़ते हैं, तो यह इस फ़िल्टर के पहले निर्धारित मानों को नहीं बदलेगा, बल्कि केवल प्रॉपर्टी लाइन के अंत में जोड़ा जाएगा, जो सही नहीं है। इसलिए, यदि कोई फ़िल्टर पहले से ही स्थापित है, तो आपको तत्व पर लागू फ़िल्टर के संग्रह के माध्यम से इसमें हेरफेर करने की आवश्यकता है: elem.filters (लेकिन ध्यान रखें कि यदि फ़िल्टर अभी तक तत्व को सौंपा नहीं गया है, तो यह असंभव है इस संग्रह के माध्यम से इसे प्रबंधित करने के लिए)। संग्रह तत्वों को फ़िल्टर नाम या इंडेक्स द्वारा एक्सेस किया जा सकता है। हालाँकि, फ़िल्टर को दो शैलियों में निर्दिष्ट किया जा सकता है, IE4 लघु शैली, या IE5.5+ शैली, जिसे कोड में ध्यान में रखा गया है।

तैयार समाधान. हम opacity.js लाइब्रेरी का उपयोग करते हैं

img (filter:alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; ) // पारदर्शिता बदलने के लिए एक नियम बनाएं: नियम का नाम सेट करें, पारदर्शिता शुरू करें और समाप्त करें, जैसे पारदर्शिता परिवर्तन की गति को प्रभावित करने वाले एक वैकल्पिक पैरामीटर विलंब के साथ-साथ FedOpacity.addRule('oR1', .3, 1, 30); फ़ेडऑपेसिटी(this.id, "oR1") " onmouseout='fadeOpacity.back(this.id) " src='/img/strawberry.jpg' width='100' ऊँचाई='80' /> फ़ेडऑपेसिटी(this.id, "oR1") " onmouseout='fadeOpacity.back(this.id) " src='/img/tomato.jpg' width='82' ऊँचाई='100' /> फ़ेडऑपेसिटी(this.id, "oR1") " onmouseout='fadeOpacity.back(this.id) " src='/img/sweet_cherry.jpg' width='98' ऊँचाई='97' />

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

नियमों को FedOpacity.addRule विधि का उपयोग करके परिभाषित किया गया है

सिंटैक्स: फ़ेडओपेसिटी.एडरूल(sRuleName, nStartOpacity, nFiishOpacity, nDalay)

तर्क:

• sRuleName - नियम का नाम, मनमाने ढंग से सेट करें;
• nStartOpacity और nFiishOpacity - प्रारंभ और अंत पारदर्शिता, 0.0 से 1.0 तक की सीमा में संख्याएँ;
• nDelay - मिलीसेकंड में देरी (वैकल्पिक तर्क, डिफ़ॉल्ट 30 है)।

हम पारदर्शिता को फ़ेडऑपसिटी (sElemId, sRuleName) विधियों के माध्यम से लुप्त होने का नाम देते हैं, जहां sElemId तत्व की आईडी है, और sRuleName नियम का नाम है। पारदर्शिता लौटाने के लिए प्रारंभिक अवस्था FedOpacity.back(sElemId) विधि का उपयोग किया जाता है।

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

a:hover img (फ़िल्टर:progid:DXImageTransform.Microsoft.Alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; )

कृपया ध्यान दें कि छवि तत्व ए के अंदर रखी गई है। तथ्य यह है कि संस्करण 6 तक इंटरनेट एक्सप्लोरर छद्म-चयनकर्ता को समझता है: होवर, केवल लिंक के संबंध में, और किसी भी तत्व के लिए नहीं, जैसा कि सीएसएस (स्थिति) में होना चाहिए IE7 में सही कर दिया गया है)।

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

ओरेम इप्सम केवल मुद्रण और टाइपसेटिंग उद्योग का नकली पाठ है। लोरेम इप्सम 1500 के दशक से ही उद्योग का मानक डमी पाठ रहा है, जब एक अज्ञात प्रिंटर ने एक प्रकार की गैली ली और इसे एक प्रकार की नमूना पुस्तक बनाने के लिए तैयार किया। यह न केवल पांच सदियों से जीवित है, बल्कि इलेक्ट्रॉनिक टाइपसेटिंग में भी छलांग लगा रहा है। , मूल रूप से अपरिवर्तित रहते हुए इसे 1960 के दशक में लोरेम इप्सम मार्ग वाले लेट्रासेट शीट के रिलीज के साथ लोकप्रिय बनाया गया था, और हाल ही में लोरेम इप्सम के संस्करणों सहित एल्डस पेजमेकर जैसे डेस्कटॉप प्रकाशन सॉफ्टवेयर के साथ।
यह एक लंबे समय से स्थापित तथ्य है कि एक पाठक किसी पृष्ठ के लेआउट को देखते समय उसकी पठनीय सामग्री से विचलित हो जाएगा। लोरेम इप्सम का उपयोग करने का मुद्दा यह है कि इसमें अक्षरों का कमोबेश सामान्य वितरण है, जैसा कि "सामग्री यहां, सामग्री यहां" के उपयोग के विपरीत है, जिससे यह पढ़ने योग्य अंग्रेजी जैसा दिखता है। कई डेस्कटॉप प्रकाशन पैकेज और वेब पेज संपादक अब लोरेम इप्सम को अपने डिफ़ॉल्ट मॉडल टेक्स्ट के रूप में उपयोग करते हैं, और "लोरेम इप्सम" की खोज से कई वेब साइटें अभी भी अपनी प्रारंभिक अवस्था में उजागर होंगी। पिछले कुछ वर्षों में विभिन्न संस्करण विकसित हुए हैं, कभी-कभी दुर्घटनावश, कभी-कभी जानबूझकर (नशीले हास्य और इसी तरह)।

तो, आज हम html पेजों में पारदर्शिता के बारे में बात करेंगे। आपने शायद पारदर्शी पॉप-अप ब्लॉक देखे होंगे, चाहे वह फोटो गैलरी हो या किसी लोकप्रिय वेबसाइट पर लॉगिन फॉर्म। HTML में पारदर्शिता के लिए कई उपयोग हैं। तो इसे कैसे बनाया जाता है और इसका उपयोग कहां किया जा सकता है?

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

तो वास्तव में HTML में पारदर्शिता कैसे व्यवस्थित की जाती है? तत्व पारदर्शिता सेट करना आमतौर पर सीएसएस विनिर्देश में शामिल नहीं है, इसलिए इसे बनाने के लिए आपको एक साथ कई निर्देशों का उपयोग करना होगा। कुछ ब्राउज़र (यानी) एक विकल्प के साथ काम करेंगे, अन्य दूसरे के साथ। यानी अंतर्निहित फ़िल्टर कार्यक्षमता का उपयोग करता है, अन्य ब्राउज़र "अपारदर्शिता" संपत्ति का उपयोग करते हैं, जो 0 (पूरी तरह से पारदर्शी वस्तु) से 1 (पूरी तरह से अपारदर्शी) की सीमा में सेट है। उदाहरण के लिए, 30% पारदर्शिता के मामले में, आपको "अपारदर्शिता:0.30; फ़िल्टर:अल्फा(अपारदर्शिता=30);" लिखना चाहिए। गुण, जैसा कि उदाहरण से देखा जा सकता है, समान हैं - केवल पहले मामले में 0 से 1 तक की संख्या का उपयोग किया जाता है, दूसरे में प्रतिशत अंकन का उपयोग किया जाता है। ऐसे ब्लॉक का एक उदाहरण: