6 
<!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置き換えてみるとうまくいきます。をp 要素の子にするiframe必要があります。iframe

4

1 に答える 1

4

これについてはよくわかりませんが、ユーザーのブラウザがiFrameをサポートしていない限り、これは表示されないと思います。

この回答を見ると、：beforeおよび：after疑似要素が親要素（この場合はiFrame）内に配置されていることがわかります。

ここで、ドキュメントに移動し、このコードからiFrameの子の動作を推測できます。

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

srcつまり、 iFrameが表示されていない場合にのみ表示されます。繰り返しますが、これは単なる推論ですが、もっともらしい説明のようです。

于 2012-10-24T19:53:11.743 に答える