Question

<!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元素的子元素。

Answer 1

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

如果你看一下this answer，它会建议将：before和：after伪元素放在父元素中，在这种情况下是iFrame。

现在我们转到the docs并可以从此代码推断出iFrame子代的行为：

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

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

在iframe元素上使用:: before之前生成的内容选择器

1 个答案: