Use the ::before generated content selector on an

2019-02-17 09:56发布

问题:

<!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>

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.

回答1:

I'm not certain on this, but I'm thinking this won't display unless the user's browser doesn't support iFrames.

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.

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>

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.