在iframe元素上使用:: before生成的内容选择器 [英] Use the ::before generated content selector on an iframe element
问题描述
<!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元素的子代.
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. I need the iframe to be a child of the p element.
推荐答案
我不确定，但是我认为除非用户的浏览器不支持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>
这就是说，它们仅在不显示iFrame的src时显示.再次，这只是推论，但这似乎是一个合理的解释.
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屋！
