使用：之前選擇器上的iframe

<!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元素和它的作品使用：之前選擇器上的iframe

（請記住，在iframe需要是p標籤內）

來源

2012-10-24 Ryan

「iframe」的內容是一個單獨的網頁;我不認爲你可以從父母申請CSS。如果可以，你可以在包含的頁面中使用'body :: before {/.....//}'，也許？ –

但即時通訊不試圖覆蓋iframe的內容 - 即時通訊嘗試覆蓋iframe對象本身，這就是爲什麼我不認爲它真的很重要 – Ryan

任何原因爲什麼你必須使用iframe：before和不只是它的父母段落？ – Jayx

我不是這個肯定的，但我想這不會顯示出來，除非用戶的瀏覽器不支持iFrames。

如果你看看this answer，它暗示：僞元素之前：和之後放置在父元素中，在這種情況下是iFrame。

現在我們頭向the docs，並且可以從該代碼推斷的iFrame孩子的行爲：

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

這就是說，在沒有顯示的iframe的src他們只顯示。再次，這只是推論，但它似乎是一個似是而非的解釋。

來源

2012-10-24 19:53:11 jmeas

使用：之前選擇器上的iframe

回答

相關問題