2010-09-18 19 views
29

मैं क्या करने के लिए कुछ वैकल्पिक तरीका खोज रहा है:कोई विशेषता "allowtransparency"

<iframe transparency=true ... 

जब मैं W3C सत्यापन करते हैं, मैं त्रुटि हो रही है:

Column 31: there is no attribute "allowtransparency" 

हैं उपयोग इस सीएसएस,

.iframe-trans-fix{ 
    opacity: 0; 
    filter:alpha(opacity=0); 
} 

उपरोक्त स्निपेट के लिए मुझे एक खाली आईफ्रेम मिल रहा है।

उत्तर

31

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

मान लीजिए आप अपने मुख्य पृष्ठ पर इस HTML है, index.html:

<html> 
    <body> 
     <iframe src="source.html" 
       allowTransparency="true" 
       style="background-color:lightgreen;" 
       width="400" height="200"> 
     </iframe> 
    </body> 
</html> 

और अपने source.html इस तरह दिखता है:

<html> 
    <body> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, magna 
      id bibendum sollicitudin, tellus tortor consequat enim, et mollis mauris 
      augue et dui. </p> 
    </body> 
</html> 

जब आप मुख्य पृष्ठ (सूचकांक खोलें। एचटीएमएल) अपने ब्राउज़र में, आप Source.html से iframe में टेक्स्ट देखेंगे, लेकिन इसमें हल्की हरे रंग की पृष्ठभूमि होगी।

संपादित करें (मैक ओएस एक्स और इंटरनेट एक्सप्लोरर 8 और Windows XP पर क्रोम पर सफारी, फ़ायरफ़ॉक्स, और क्रोम के साथ परीक्षण किया गया): कुंजी यह है: स्रोत पृष्ठ की अपनी पृष्ठभूमि सेट नहीं कर सकता। यदि ऐसा होता है, तो यह पारदर्शी पृष्ठभूमि को अनदेखा करता है।

+1

यह विशेषता आपके विचार के रूप में व्यापक रूप से उपयोग नहीं की जा सकती है, क्या आपने देखा कि क्या वास्तव में ब्राउज़र पर अन्यथा आईई पर व्यवहार बदल गया है? जहां तक ​​मैं यह कह सकता हूं कि आईई विशिष्ट विशेषता है और अन्य ब्राउज़र डिफ़ॉल्ट रूप से iframes पर पारदर्शिता की अनुमति देने के लिए डिफ़ॉल्ट हैं और केवल इस विशेषता को अनदेखा करते हैं। –

+0

मेरा जवाब दोबारा पढ़ें। आपके प्रश्न का उत्तर पहले से ही है। –

+0

@ james.garriss मैंने आपको जवाब पढ़ा और आप विशेष रूप से लिखते हैं कि सभी ब्राउज़र विशेषता का समर्थन करते हैं, इसकी कार्यक्षमता नहीं। गैर इंटरनेट एक्सप्लोरर ब्राउज़र इंटरनेट एक्सप्लोरर (8 और नीचे, स्पष्ट रूप से) व्यवहार करते हैं जैसे व्यवहार (जब विशेषता इसके लिए सेट की जाती है) तब भी जब उनके लिए विशेषता सेट नहीं की जाती है। क्रोम डीओएम संपत्ति का समर्थन नहीं करता प्रतीत होता है। आपको वास्तव में क्या लगता है कि यह समर्थन करता है? – PhistucK

12

मुझे यकीन है कि आप यहाँ करने के लिए कोशिश कर रहे हैं क्या नहीं कर रहा हूँ, लेकिन यह होना चाहिए क्या आप देख रहे हैं: है कि आप iframe करने के लिए पृष्ठभूमि चाहते हैं,

iframe { 
    background-color: transparent; 
} 

यह वह जगह है, ज़ाहिर है, यह सोचते हैं पारदर्शी हो।

1
  1. कोई HTML विशेषता transparency नामित नहीं है, इसलिए आप हमेशा साथ iframe transparency=true

  2. यदि आप शून्य करने के लिए पारदर्शिता सेट, तुम नहीं तत्व बिल्कुल देखेंगे एक त्रुटि प्राप्त होगी - आप की जरूरत अस्पष्टता की डिग्री को परिभाषित करने के:

    opacity: 0.25; /* all modern browsers */ 
    filter: alpha(opacity=25) /* IE */ 
    

उपरोक्त CSS (ध्यान दें: अस्पष्टता मूल्यों IE के लिए 0-100 कर रहे हैं, 0-1 अन्य ब्राउज़रों के लिए) अन्य तत्वों को पीछे छोड़ देगा (उदा। एक पृष्ठ पृष्ठभूमि छवि) दिखाने के लिए, भले ही अस्पष्टता सेटिंग वाले तत्व में रंगीन पृष्ठभूमि हो।

पारदर्शिता पर अधिक नियंत्रण के लिए, RGBA (A = alpha) देखते हैं, लेकिन चर ब्राउज़र समर्थन के लिए बाहर देखते हैं।

+0

, मेरे iframe पारदर्शी जाता है, लेकिन बात मैं iframe भी अंदर अपनी सामग्री को देखने के लिए सक्षम नहीं कर सकते है .. – Bharanikumar

+0

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

1

सबसे पहले, 'पारदर्शिता = "true"' जैसी कोई चीज नहीं है, तो वह काम नहीं करेंगे।

दूसरे, आप पृष्ठभूमि पारदर्शी या पूरे आइफ्रेम पारदर्शी बनाने के लिए कोशिश कर रहे हैं?

सीएसएस अस्पष्टता संपत्ति जो कुछ तत्व आप पारदर्शी पर इसका इस्तेमाल अंदर सब कुछ बना देता है। 0 से 1 तक अस्पष्टता स्केल, जहां 0 पूरी तरह से देखता है, 0.5 आधा पारदर्शी है, और 1 पूरी तरह से दिखाई देता है।

आप एक div या एक iframe (या कुछ भी) पृष्ठभूमि और पाठ पर इस का उपयोग करते हैं सभी समान रूप से फीका कर दिया जाएगा।

दूसरी ओर, हर आधुनिक ब्राउज़र में आप backround सेट कर सकते हैं RGBA रंग का उपयोग आंशिक रूप से पारदर्शी होने के लिए। आप इसे इस तरह करना चाहिए:

iframe.transparent { 
    background-color: #FFF; /*this gives a background color for browsers that can't do RGBA color, like internet explorer*/ 
    background-color: rgba(255,255,255,0.5); 
} 

RGBA रंग परिभाषा सिर्फ अस्पष्टता विशेषता (0 =, स्पष्ट 1 = ठोस) की तरह काम करता है, सिवाय इसके कि यह केवल विशिष्ट आइटम आप पारदर्शी पर सेट करता है और प्रभावित नहीं करता है उस आइटम के अंदर आइटम (यानी यह आपके आईफ्रेम के अंदर पाठ को प्रभावित नहीं करता है)। पहले तीन नंबर 0 से 255 के पैमाने पर आपके रंग के लाल, हरे, और नीले मान हैं।

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

आशा है कि इससे मदद मिलती है!

+0

यह आपके अनुसार नमूना के ऊपर, <शैली प्रकार = "टेक्स्ट/सीएसएस"> /* है। परीक्षण-फ्रेम { /* अस्पष्टता: 0.25;/* सभी आधुनिक ब्राउज़रों *// * फ़िल्टर: अल्फा (अस्पष्टता = 20);/* आईई */ /* अस्पष्टता: 0.25; फ़िल्टर: अल्फा (अस्पष्टता = 0); } */ iframe.transparent { पृष्ठभूमि-रंग: # 000000;/* यह ब्राउज़र के लिए पृष्ठभूमि रंग देता है जो आरजीबीए रंग नहीं कर सकता, जैसे इंटरनेट एक्सप्लोरर */ पृष्ठभूमि-रंग: rgba (0,0,0,0।5); } <शरीर bgcolor = "# 000000"> लेकिन अभी भी कोई अद्यतन, में है आईई मेरा इफ्राम सफेद है लेकिन साइट काली बीजी – Bharanikumar

+0

क्या आप जिस पेज पर काम कर रहे हैं उस लिंक को साझा कर सकते हैं ताकि मैं पूरे कोड को देख सकूं? – Andrew

3

एक तरह से आप jQuery के साथ ऐसा कर सकते हैं यदि आप jQuery फ़ाइल को शामिल किया है नहीं है - अपने iframe की है कि

<!--[if lt IE 9]><script> $(".classname").attr("allowTransparency", "true"); </script><![endif]--> 

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

(इस विधि मानता है आप पहले से ही iframe {background-color:transparent} जो पुराने आईई संस्करण पर काम नहीं करता है)

IE में
+0

+1, जिसे अनुरोध किया गया था। हालांकि मैंने वास्तव में कोशिश नहीं की है। –

+4

यहां jQuery को शामिल करने की आवश्यकता नहीं है। यह पर्याप्त है: document.getElementById ("yourframeid")। अनुमति दें ट्रांसपेरेंसी = सत्य; – tomg

+0

आत्म-उद्धरण के लिए "** यदि ** आपने इसे इंस्टॉल किया है"। मैंने यह नहीं बताया कि आपको इसे करने के लिए इसे इंस्टॉल करना था। यदि आपने नहीं किया है, तो मैं सहमत हूं कि आपका तरीका बेहतर होगा। –

संबंधित मुद्दे