<!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>
我正在尝试将图像放在一个iframe但由于某种原因::before选择器不相处iframe- 尝试用iframe任何其他元素替换它并且它起作用.我需要iframe成为p元素的孩子.
我对此不确定，但我认为除非用户的浏览器不支持 iFrame，否则不会显示。
如果您查看此答案，它表明 :before 和 :after 伪元素放置在父元素内，在本例中为 iFrame。
现在我们转到文档并可以从以下代码推断 iFrame 子项的行为：
<iframe src="page.html" width="300" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
也就是说，它们仅在srciFrame 不显示时显示。再说一遍，这只是推论，但似乎是一个合理的解释。