2012-10-24 16 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> 

ben bir iframe üzerinde bir görüntü yerleştirmek için çalışıyorum, ama nedense ediyorum: seçici iframe ile anlaşamaması önce - başka ile iframe değiştirmeyi deneyin eleman ve kullanarak: seçicinin önce bir iframe üzerinde

Bu konuda emin değilim

+0

"iframe" içeriği ayrı bir web sayfasıdır; CSS'yi ebeveynlerden uygulayabileceğinizi sanmıyorum. Mümkünse, içerdeki sayfada 'body :: before {/*...*/}' kullanabilirsin, belki? –

+1

ama iframe içeriğinin üzerine bir bindirme yerleştirmeye çalışmıyorum - iframe nesnesinin üzerine yerleştirmeye çalışıyorum, bu yüzden bunun gerçekten önemli olacağını düşünmüyorum. – Ryan

+0

iframe'i kullanmanızın nedenlerinden biri: sadece ebeveyn paragraf değil mi? – Jayx

cevap

4

(iframe p etiketleri içinde olması gerektiğini lütfen unutmayın) ama bu görüntüler olmayacak düşünüyorum çalışır kullanıcının tarayıcısına sürece iFrame'leri desteklemiyor.

this answer'a bakarsanız, aşağıdakileri önerir: önce ve sonra: yalancı öğeler ana öğenin içine yerleştirilir, bu durumda bu iFrame'dir.

Şimdi the docs sından ve bu koddan iFrame çocukların davranışlarını çıkarabiliriz: iFrame'in src gösterilmediğinde demek ki

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

, sadece görüntüler. Yine, bu sadece çıkarım, ama makul bir açıklama gibi görünüyor.

İlgili konular