在iframe上使用：before选择器 [英] using the :before selector on an 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上放置一个图像，但由于某种原因：before selector isn与iframe一致 - 尝试用任何其他元素替换iframe，并且它工作
I'm trying to place an image over an iframe, but for some reason the :before selector isn't getting along with the iframe — try replacing the iframe with any other element and it works
（请记住，iframe需要在p标签内）
(please keep in mind that the iframe needs to be within the p tags)
推荐答案
我不确定这一点，但我认为这不会显示，除非用户的浏览器不支持iFrame。
I'm not certain on this, but I'm thinking this won't display unless the user's browser doesn't support iFrames.
如果您查看此答案 ，它建议：before和：after伪元素被放置在父元素内，在这种情况下是iFrame。
If you take a look at this answer, it suggests that the :before and :after pseudoelements are placed inside the parent element, which in this case is the iFrame.
现在我们转到文档，并可以从此代码推断iFrame儿童的行为：
Now we head over to the docs and can infer the behavior of iFrame children from this code:
<iframe src="page.html" width="300" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
也就是说，只有当 src 的iFrame不显示。同样，这只是推理，但它似乎是一个合理的解释。
Which is to say, they only display when the src of the iFrame isn't displayed. Again, this is just inference, but it seems like a plausible explanation.
这篇关于在iframe上使用：before选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
