6 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#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>

我正在尝试将图像放置在 an 上，iframe但由于某种原因，::before选择器无法与 the 相处iframe- 尝试将 the 替换为iframe任何其他元素并且它可以工作。我需要iframe成为 p 元素的子元素。

4

1 回答 1

4

我对此不确定，但我认为除非用户的浏览器不支持 iFrame，否则它不会显示。

如果你看一下这个答案，它表明 :before 和 :after 伪元素被放置在父元素内，在这种情况下是 iFrame。

现在我们转到文档，可以从这段代码中推断出 iFrame 子项的行为：

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

也就是说，它们仅src在 iFrame 不显示时才显示。同样，这只是推论，但这似乎是一个合理的解释。

于 2012-10-24T19:53:11.743 回答