कभी-कभी ऐसा करना आवश्यक हो जाता है पारदर्शी पृष्ठभूमि पृष्ठ पर एक विशिष्ट ब्लॉक के लिए। इस प्रभाव को प्रारूप में एक पारदर्शी पृष्ठभूमि छवि बनाकर प्राप्त किया जा सकता है * .पीएनजी और संपत्ति के माध्यम से इसे स्थापित करना पृष्ठभूमि: url ("./ छवियाँ / fon.png");.

ओपेकिटी संपत्ति का उपयोग करना

जब सीएसएस के साथ किया जा सकता है तो इतनी जटिलता क्यों। पेज पर एक मुख्य ब्लॉक बनाते हैं ( पृष्ठ) और नेस्टेड ब्लॉक ( खंड मैथा), जिसे हम पारदर्शिता स्थापित करेंगे। क्रॉस-ब्राउज़र संगतता इस प्रकार प्राप्त की जाती है: इंटरनेट एक्सप्लोरर के लिए संपत्ति - फ़िल्टर: अल्फा (अपारदर्शिता \u003d 50) (0 से 100 की रेंज में पारदर्शिता मूल्य), CSS3 मानक का समर्थन करने वाले ब्राउज़रों के लिए - अपारदर्शिता: 0.5 (0.0 से 1.0 की रेंज में एक संख्या).

HTML कोड:

परिणाम:

ब्लॉक के लिए पारदर्शी पृष्ठभूमि

जैसा कि आप देख सकते हैं, पारदर्शिता सभी बच्चों तक फैली हुई है।

ब्लॉक के लिए पारदर्शी पृष्ठभूमि

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

BACKGROUND-COLOR संपत्ति का उपयोग करना

हमें CSS स्टाइलशीट में कुछ बदलाव करने की आवश्यकता है, अर्थात् ब्लॉक के लिए प्रतिस्थापित करें DIV कक्षा के साथ खंड मैथा संपत्ति अस्पष्टता प्रति संपत्ति पीछे का रंग.

Div.block (चौड़ाई: 260px; height: 140px; मार्जिन-टॉप: 79px; मार्जिन-लेफ्ट: 94px; बॉर्डर: 1px सॉलिड # 333333; / * पारदर्शी बैकग्राउंड केवल DIV.block * / बैकग्राउंड-कलर: rgba (255, 255) , 255, 0.5); / * पृष्ठभूमि का रंग, पारदर्शिता 0.5 * /)

परिणाम:

ब्लॉक के लिए पारदर्शी पृष्ठभूमि

रंग और पृष्ठभूमि के लिए उपयोग किए गए उपरोक्त उदाहरण में rGBA प्रारूप ... जहां, पहले तीन अक्षर खड़े होते हैं लाल, हरा, नीला (लाल, हरा, नीला), बाद का प्रतीक है अल्फा चैनल (ए) और सेट करता है पारदर्शिताb तत्व से 0.0 इससे पहले 1.0 .

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

रंग घटक का मूल्य अक्षरों के बजाय कोष्ठक में रखा जाता है, इसे किसी भी आलेखीय संपादक में देखा जा सकता है, उदाहरण के लिए Paint.Net (स्क्रीनशॉट)। अंतिम मान ए पारदर्शिता सेट करता है और संपत्ति के मूल्य से मेल खाता है अस्पष्टता.

http://cp77.comxa.com/verstka/css-transparent-fon

सीएसएस संपत्ति अस्पष्टता तत्व की अस्पष्टता निर्धारित करता है। पारदर्शिता के विपरीत, अपारदर्शिता वह डिग्री होती है, जो किसी तत्व के पीछे छिपी होती है।

इस इंटरैक्टिव उदाहरण के लिए स्रोत एक GitHub भंडार में संग्रहीत किया जाता है। यदि आप इंटरैक्टिव उदाहरण परियोजना में योगदान करना चाहते हैं, तो कृपया https://github.com/mdn/interactive-examples पर क्लोन करें और हमें एक पुल अनुरोध भेजें।

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

1 से अधिक मूल्य के साथ अपारदर्शिता का उपयोग करना एक नए ओवरले संदर्भ में तत्व रखता है।

के उदाहरण

मूल उदाहरण

div (पृष्ठभूमि-रंग: पीला;)। लाइट (अपारदर्शिता: 0.2; / * पृष्ठभूमि पर * * * बमुश्किल दिखाई देने वाला पाठ * .medium (अपारदर्शिता: 0.5; / * पृष्ठभूमि पर पाठ अधिक दिखाई देता है * /) .हैवी (अपारदर्शिता: 0.9 ; * * पृष्ठभूमि पर पाठ बहुत स्पष्ट है * /)

के साथ विभिन्न अस्पष्टता: मंडराना

img.opacity (अपारदर्शिता: 1; फ़िल्टर: अल्फ़ा (अपारदर्शिता \u003d 100); / * IE8 और नीचे * / ज़ूम: 1; / * "हैशआउट" IE 7 और नीचे में ट्रिगर / /) img.opacity: होवर (अपारदर्शिता: 0..png "alt \u003d" (!! LANG: MDN लोगो" width="128" height="146" class="opacity"> !}

पहुंच संबंधी समस्याएं

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

रंग विपरीत अनुपात समायोजित चमक और पृष्ठभूमि रंग मान के साथ पाठ की चमक की तुलना द्वारा निर्धारित किया जाता है। वर्तमान वेब कंटेंट एक्सेसिबिलिटी गाइडलाइंस (WCAG) का पालन करने के लिए, टेक्स्ट कंटेंट को हेडिंग जैसे बड़े टेक्स्ट के लिए 4.5: 1 और 3: 1 के अनुपात की आवश्यकता होती है। बड़े पाठ को 18.66px या बड़े, या 24px या बड़े के रूप में परिभाषित किया गया है।

विशेष विवरण

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

ब्राउज़र का समर्थन

इस पृष्ठ पर संगतता तालिका संरचित डेटा से उत्पन्न होती है। यदि आप डेटा में योगदान करना चाहते हैं, तो कृपया https://github.com/mdn/browser-compat-data देखें और हमें एक पुल अनुरोध भेजें।

GitHub पर संगतता डेटा अपडेट करें

	कंप्यूटर						मोबाइल
	क्रोम	धार	फ़ायरफ़ॉक्स	इंटरनेट एक्स्प्लोरर	ओपेरा	सफारी	Android वेबव्यू	Android के लिए क्रोम	Android के लिए फ़ायरफ़ॉक्स	Android के लिए ओपेरा	IOS पर सफारी	सैमसंग इंटरनेट
अस्पष्टता	क्रोम पूर्ण समर्थन 1	धार पूर्ण समर्थन 12	फ़ायरफ़ॉक्स पूर्ण समर्थन 1 पूर्ण समर्थन 1 कोई समर्थन नहीं 1 - 3.5 उपसर्ग के साथ उपसर्ग के साथ विक्रेता उपसर्ग की आवश्यकता है: -मोज़-	अर्थात पूर्ण समर्थन 9	ओपेरा पूर्ण समर्थन 9	सफारी पूर्ण समर्थन 2 पूर्ण समर्थन 2 कोई समर्थन 1.1 - 2 उपसर्ग के साथ उपसर्ग के साथ विक्रेता उपसर्ग की आवश्यकता है: -ttml-	WebView Android पूर्ण समर्थन 1	क्रोम Android पूर्ण समर्थन 18	फ़ायरफ़ॉक्स Android पूर्ण समर्थन 4	ओपेरा Android पूर्ण समर्थन 10.1	सफारी आईओएस पूर्ण समर्थन 1	सैमसंग इंटरनेट Android पूर्ण समर्थन हाँ
प्रतिशत अस्पष्टता मूल्यों के लिए समर्थन	क्रोम पूर्ण समर्थन 78	एज नो सपोर्ट नं	फ़ायरफ़ॉक्स पूर्ण समर्थन 70	IE कोई समर्थन नहीं	ओपेरा कोई समर्थन नहीं	सफारी नो सपोर्ट नं	WebView Android पूर्ण समर्थन 78	क्रोम Android पूर्ण समर्थन 78	फ़ायरफ़ॉक्स Android कोई समर्थन नहीं	ओपेरा Android कोई समर्थन नहीं	सफारी आईओएस कोई समर्थन नहीं	सैमसंग इंटरनेट Android कोई समर्थन नहीं

किंवदंती

पूर्ण समर्थन पूर्ण समर्थन समर्थन नहीं समर्थन नहीं उपयोग करने के लिए विक्रेता उपसर्ग या अन्य नाम की आवश्यकता होती है। उपयोग करने के लिए विक्रेता उपसर्ग या अन्य नाम की आवश्यकता होती है।

सीएसएस 3 संपत्ति अस्पष्टता आपको साइट के एक या दूसरे तत्व को पारदर्शी बनाने की अनुमति देता है।

एक तत्व की पारदर्शिता से एक मूल्य द्वारा निर्धारित किया जाता है 0 इससे पहले 1 कहाँ पे 0 - पूरी तरह से पारदर्शी a 1 - अपारदर्शी बिल्कुल .. इसलिए उदाहरण के लिए मान 0.5 गुण अस्पष्टता छवि पर लागू होने का मतलब होगा कि यह छवि अर्ध-पारदर्शी होनी चाहिए।

IE में पारदर्शिता

इंटरनेट एक्सप्लोरर ब्राउज़र गुणों का समर्थन नहीं करता है अस्पष्टता नौवें संस्करण तक, हालांकि, इसका अपना फ़िल्टर है जिसके साथ आप पारदर्शिता की डिग्री निर्धारित कर सकते हैं:

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

मूल्य अस्पष्टता Internet Explorer ब्राउज़र फ़िल्टर के लिए भिन्न हो सकते हैं 0 - पूरी तरह से पारदर्शी 100 - न झिल्लड़

इस मेनू के ब्लॉक IE में भी होवर पर अर्ध-पारदर्शी होंगे !!

घर
साइट का नक्शा
एक हाथी खरीदें
एक हाथी बेचते हैं
एक हाथी को किराए पर लें

उपसर्ग।

यह, सिद्धांत रूप में, पारदर्शिता पर अध्याय को समाप्त कर सकता है, लेकिन मैं आपको तथाकथित के बारे में अधिक बताना चाहूंगा विक्रेता उपसर्ग.. इन साथियों का इस अध्याय से बहुत अधिक लेना-देना नहीं है, हालांकि, CSS3 सीखने के दौरान, वे अधिक से अधिक बार और कहीं-कहीं आपके बारे में बात करने की आवश्यकता होगी - इसलिए मैं आपको यहां बताऊंगा।

इसलिए, विक्रेता उपसर्ग विशेष रूप से CSS गुणों के लिए ब्राउज़र द्वारा उपयोग किए जाने वाले CSS गुणों के लिए विशेष उपसर्ग हैं जो आधिकारिक तौर पर CSS विनिर्देशन का हिस्सा नहीं हैं।

हमें याद है कि CSS 3 विनिर्देश अभी भी विकास के अधीन है और औपचारिक रूप से इस ट्यूटोरियल में वर्णित गुण प्रकृति में मौजूद नहीं हैं, लेकिन ब्राउज़र पहले से ही सक्रिय रूप से अपने जोखिम और जोखिम में उनका उपयोग कर रहे हैं।

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

या मान लें कि ब्राउज़र डेवलपर्स अपनी संपत्ति के साथ आए हैं - एक नवाचार जो किसी और के पास नहीं है और कहीं भी नहीं है, लेकिन ऐसी संपत्ति के साथ एक दस्तावेज सत्यापन जांच पास नहीं करता है क्योंकि विनिर्देश में ऐसी कोई संपत्ति नहीं है।

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

यहाँ सबसे लोकप्रिय ब्राउज़र और उनके उपसर्ग हैं:

ब्राउज़र	उपसर्ग
ओपेरा	-O-
फ़ायरफ़ॉक्स, सीमोंकी, कैमिनो	-moz-
इंटरनेट एक्सप्लोरर 8 और इसके बाद के संस्करण	-एमएस-
संस्करण 3, कॉनकेर तक सफारी	-khtml-
सफारी 3 और उच्चतर, Google Chrome	-webkit-

उपसर्गों का उपयोग करना बहुत आसान है, कुछ सीएसएस संपत्ति लेने के लिए पर्याप्त है और इसके लिए आवश्यक उपसर्ग को प्रतिस्थापित करना, उदाहरण के लिए, एक संपत्ति के लिए अस्पष्टता विकल्प -moz- यह पता चला है: -moz-अस्पष्टता

हालांकि वास्तव में मेरी अभिव्यक्ति " उपसर्गों का उपयोग करें"गलत है! वास्तव में, कुछ भी कहीं भी प्रतिस्थापित नहीं है, बस एक संपत्ति है अस्पष्टता , है -moz-अस्पष्टता और ये दो अलग-अलग गुण हैं जो एक ही कार्य नहीं करते हैं !! - यह समझा जाना चाहिए ।।

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

पारदर्शिता पर इस अध्याय के रूप में, यह ध्यान दिया जाना चाहिए कि फ़ायरफ़ॉक्स 3.5 और पहले अपनी स्वयं की संपत्ति का उपयोग करें -moz-अस्पष्टता , और संस्करण 1.1 से पहले सफारी ब्राउज़र अपनी संपत्ति का उपयोग करता है -khtml-अस्पष्टता .

तो हमारे उदाहरण को पूरी तरह से क्रॉस-ब्राउज़र बनाने के लिए, हमें कोड में कुछ और पंक्तियाँ जोड़ने की आवश्यकता है:

जैसा कि आप देख सकते हैं, उपसर्ग कोड को काफी बढ़ाते हैं और उनका उपयोग हमेशा उचित नहीं होता है यदि ब्राउज़र के संस्करण जो कुछ गुणों के साथ काम करना चाहते हैं केवल उनके उपसर्गों का उपयोग करना काफी पुराना है, जैसा कि संपत्ति के मामले में है अस्पष्टता , तो आप उन्हें निर्दिष्ट नहीं कर सकते .. - हालांकि यह बुरी सलाह है ..

अब कुछ उपयोगी टिप्स के लिए ।।

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

/* 06.07.2006 */

सीएसएस पारदर्शिता (सीएसएस अपारदर्शिता, जावास्क्रिप्ट अपारदर्शिता)

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

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

सीएसएस अपारदर्शिता सहजीवन

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

फ़िल्टर: progid: DXImageTransform.Microsoft.Alpha (अपारदर्शिता \u003d 50); / * IE 5.5 + * / -मोज़-अपारदर्शिता: 0.5; / * मोज़िला 1.6 और नीचे * / -khtml - अपारदर्शिता: 0.5; / * कोनकोर 3.1, सफारी 1.1 * // * CSS3 - मोज़िला 1.7b +, फ़ायरफ़ॉक्स 0.9 +, सफारी 1.2+, ओपेरा 9 * /

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

जावास्क्रिप्ट अस्पष्टता सहजीवन

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

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

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

मुझे लगता है कि यह setElementOpacity फ़ंक्शन के IE से संबंधित भाग को स्पष्ट करने के लायक है।

वार oAlpha \u003d elem.filters ["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity \u003d nOpacity; और एलएम.स्टाइल.फिल्टर + \u003d "प्रोगिड: डीएक्सआईएमेजट्रांसफॉर्म। माइकोसो.आलफा (अपारदर्शिता \u003d" + nOpacity + ")";

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

तत्व पारदर्शिता का चिकना परिवर्तन

तैयार घोल। Opacity.js लाइब्रेरी का उपयोग करना

fadeOpacity (यह .id, "oR1")"ऑनमाउट \u003d" fadeOpacity.back (यह .id)"src \u003d" / img / strawberry.jpg "width \u003d" 100 "height \u003d" 80 "/\u003e fadeOpacity (यह .id, "oR1")"ऑनमाउट \u003d" fadeOpacity.back (यह .id)"src \u003d" / img / tomato.jpg "width \u003d" 82 "height \u003d" 100 "/\u003e fadeOpacity (यह .id, "oR1")"ऑनमाउट \u003d" fadeOpacity.back (यह .id)"src \u003d" / img / sweet_cherry.jpg "width \u003d" 98 "height \u003d" 97 "/\u003e

मूल चरण:

1. हम कार्यों के पुस्तकालय को जोड़ते हैं;
2. हम विधि का उपयोग करके नियमों को परिभाषित करते हैं fadeOpacity.addRule ();
3. विधि को बुला रहा है फीकापन () प्रारंभ मूल्य से अंतिम मूल्य तक पारदर्शिता बदलने के लिए, या fadeOpacity.back () पारदर्शिता स्तर के प्रारंभिक मूल्य पर लौटने के लिए।

च्यू

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

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

वाक्य - विन्यास: fadeOpacity.addRule (sRuleName, nStartOpacity, nFinishOpacity, nDalay)

तर्क:

• sRuleName - नियम का नाम, मनमाने ढंग से सेट;
• nStartOpacity और nFinishOpacity - प्रारंभ और समाप्ति पारदर्शिता, 0.0 से 1.0 तक की सीमा में संख्या;
• nDelay - मिलीसेकंड में देरी (वैकल्पिक, चूक 30)।

पारदर्शिता लुप्त होती के लिए कॉल fadeOpacity (sElemId, sRuleName) विधियों के माध्यम से किया जाता है, जहां sElemId तत्व आईडी है, और sRuleName नियम नाम है। FadeOpacity.back (sElemId) विधि का उपयोग इसकी मूल स्थिति में पारदर्शिता वापस लाने के लिए किया जाता है।

: आसानी से पारदर्शिता को बदलने के लिए होवर करें

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

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

IE में पारदर्शिता और दांतेदार पाठ

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

अच्छा दिन, वेब विकास geeks, साथ ही उसके newbies। उन लोगों के लिए जो आईटी क्षेत्र में रुझानों का पालन नहीं करते हैं, या बल्कि, वेब फैशन, मैं पूरी तरह से सूचित करना चाहता हूं कि इस विषय पर यह प्रकाशन: "सीएसएस टूल के साथ एक पारदर्शी ब्लॉक कैसे करें" आपके लिए सिर्फ एक तरीका है। दरअसल, वर्तमान 2016 में, ऑनलाइन सेवाओं में विभिन्न पारदर्शी वस्तुओं की शुरूआत को एक स्टाइलिश कदम माना जाता है।

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

विधि 1. एंटीडिल्वियन

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

यह, मेरी राय में, "बैसाखी" निश्चित रूप से ब्राउज़र के पुराने संस्करणों में मदद करता है जिसमें आधुनिक समाधान काम नहीं करते हैं। लेकिन यह ध्यान दिया जाना चाहिए कि पाठ के प्रदर्शन की गुणवत्ता , ऐसे में खुदा, तेजी से गिरता है।

विधि 2. भ्रमित नहीं

दुर्लभ मामलों में, डेवलपर्स समस्या को हल करके एक पारभासी तस्वीर डालने की कोशिश करते हैं ... एक तैयार-अर्ध-पारदर्शी तस्वीर! इसके लिए, PNG-24 प्रारूप में सहेजी गई छवियों का उपयोग किया जाता है। यह ग्राफिक प्रारूप आपको लिप्यंतरण के 256 स्तरों को सेट करने की अनुमति देता है।

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

हालाँकि, यह विधि कई कारणों से सुविधाजनक नहीं है:

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

तरीका 3. मालिकाना

ब्लॉक को पारदर्शी बनाने का सबसे आम और प्रसिद्ध तरीका है संपत्ति अस्पष्टता.

पैरामीटर मान श्रेणी में भिन्न होता है, जहां 0 पर ऑब्जेक्ट अदृश्य है, और 1 पर यह पूरी तरह से प्रदर्शित होता है। हालांकि, यहां कुछ अप्रिय क्षण भी हैं।

सबसे पहले, सभी बच्चों को पारदर्शिता विरासत में मिलती है। इसका मतलब है कि पृष्ठभूमि के साथ-साथ उत्कीर्ण पाठ भी "चमकेंगे"।

दूसरे, इंटरनेट एक्सप्लोरर फिर से "अपनी नाक को चालू करता है" और संस्करण 8 तक के साथ काम नहीं करता है अस्पष्टता.

इस समस्या को हल करने के लिए, का उपयोग करें फिल्टर:अल्फा (अपारदर्शिता \u003d मान).

आइए एक उदाहरण देखें।

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

विधि 4. आधुनिक

आज, पेशेवर आरजीबीए (आर, जी, बी, ए) उपकरण का उपयोग करते हैं।

इससे पहले, मैंने कहा कि आरजीबी लोकप्रिय रंग मॉडल में से एक है, जहां आर लाल, जी - हरे और बी के रंगों के सभी रंगों के लिए जिम्मेदार है।

सीएसएस पैरामीटर के मामले में, अल्फा ए अल्फा चैनल के लिए जिम्मेदार है, जो बदले में पारदर्शिता के लिए जिम्मेदार है।

उत्तरार्द्ध विधि का मुख्य लाभ यह है कि अल्फा चैनल स्टाइल ब्लॉक के अंदर वस्तुओं को प्रभावित नहीं करता है।

rgba (आर, जी, बी, ए) के बाद से समर्थित है:

• ओपेरा के 10 संस्करण;
• इंटरनेट एक्सप्लोरर 9;
• सफ़ारी 3.2;
• फ़ायरफ़ॉक्स के 3 संस्करण।

मैं एक दिलचस्प तथ्य बताना चाहूंगा! किसी प्रॉपर्टी को मिलाते समय प्रिय इंटरनेट एक्सप्लोरर 7 एक एरर देता है पीछे का रंग रंगों के नाम के साथ (पृष्ठभूमि-रंग: सोना)। इसलिए, यह केवल उपयोग करने लायक है:

पृष्ठभूमि-रंग: rgba (255, 215, 0, 0.15)

अब एक उदाहरण के लिए।

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

आपको हमारे स्टोर में सभी प्रकार के फूल मिलेंगे।

ध्यान दें कि ब्लॉक की पाठ सामग्री पूरी तरह से दिखाई दे रही है (100% काला), जबकि पृष्ठभूमि 0.88 के अल्फा चैनल पर सेट है, अर्थात। 88%।

यह प्रकाशन समाप्त करता है। मेरे ब्लॉग की सदस्यता लें और अपने दोस्तों को आमंत्रित करना न भूलें। वेब लैंग्वेज सीखने का सौभाग्य! अलविदा!