2012-10-24 11 views
5
<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      #test iframe { 
       border: none; 
       background: #333; 
       width: 500px; 
       height: 500px; 
       overflow: hidden; 
      } 

      #test iframe:before { 
       display: block; 
       content: " test"; 
       width: 500px; 
       height: 500px; 
       background: url('overlay.png') no-repeat; 
       position: relative; 
       top: 0px; 
       left: 0px; 
       z-index: 999; 
      } 
     </style> 
    </head> 
<body> 
    <div id="test"> 
     <p><iframe></iframe></p> 
    </div> 
</body> 
</html> 

मैं एक iframe से अधिक एक छवि जगह की कोशिश कर रहा हूँ, लेकिन किसी कारण से: से पहले चयनकर्ता आइफ्रेम के साथ नहीं मिल रहा है - किसी अन्य के साथ आइफ्रेम की जगह की कोशिश तत्व है और यहका उपयोग कर: एक iframe पर चयनकर्ता से पहले

(कृपया ध्यान रखें कि iframe पी टैग के भीतर होने की जरूरत है)

+0

'iframe' की सामग्री एक अलग वेब पेज है; मुझे नहीं लगता कि आप माता-पिता से सीएसएस लागू कर सकते हैं। यदि आप सक्षम हैं, तो आप निहित पृष्ठ में 'body :: पहले {/*...*/} 'का उपयोग कर सकते हैं? –

+1

लेकिन आईफ्रेम की सामग्री पर ओवरले लगाने की कोशिश नहीं कर रहा हूं - मैं आईफ्रेम ऑब्जेक्ट पर ओवरले करने की कोशिश कर रहा हूं, यही कारण है कि मुझे नहीं लगता कि यह वास्तव में – Ryan

+0

कोई फर्क नहीं पड़ता कि आपको iframe का उपयोग क्यों करना है: पहले और न केवल यह मूल अनुच्छेद है? – Jayx

उत्तर

4

मैं इस पर कुछ नहीं कर रहा हूँ, लेकिन मैं इस से प्रदर्शित नहीं होगा सोच रहा हूँ काम करता है जब तक कि उपयोगकर्ता के ब्राउज़र iFrames का समर्थन नहीं करता है।

यदि आप this answer पर एक नज़र डालें, तो यह सुझाव देता है कि: पहले और: मूल तत्व के अंदर स्यूडोलेमेंट्स रखे जाने के बाद, जो इस मामले में आईफ्रेम है।

अब हम the docs को सामने और इस कोड से iFrame बच्चों के व्यवहार का अनुमान लगा सकते हैं:

<iframe src="page.html" width="300" height="300"> 
    <p>Your browser does not support iframes.</p> 
</iframe> 

कौन सा कहने के लिए है, वे केवल प्रदर्शित जब iFrame के src प्रदर्शित नहीं है। दोबारा, यह सिर्फ अनुमान है, लेकिन यह एक व्यावहारिक स्पष्टीकरण की तरह लगता है।

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