7

私は次のHTMLを持っています:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>:before pseudo-class and images</title>
    <style type="text/css" media="screen">
        img {
            display: block;
            width: 640pt;
        }
        img:before {
            content: "Test";
        }
    </style>
</head>
<body>
    <img src="http://andreygromov.name/picture/flower/flower4.jpg" alt="Ваза с цветами" />
</body>
</html>

:before は画像には表示されませんが、どの div にも表示されます。

なんで？

更新: W3C でこの説明を見つけました:

ノート。この仕様は、:before および :after と置き換えられた要素 (HTML の IMG など) との相互作用を完全には定義していません。これは、将来の仕様でより詳細に定義されます。

更新 2:

私は言及するのを忘れています-CSSで画像の「alt」属性を視覚化する必要があります。

img:before {
    display: block;
    content: attr(alt);
    background-color: #333;
    /* etc. */
}
4

1 に答える 1

4

あなたが引用した仕様を考えると、これは画像を要素でラップしてそれに適用する必要がある場合だと思います:before。

編集：

属性が代替テキスト用であり、基本的に画像と同じ情報を提供する必要があることを考えると、それaltはユーザーの情報を複製していることを意味しませんか？

表示したい情報をtitle周囲の要素の属性に入れて表示してみませんか？

例：

<style type="text/css" media="screen">
  .image:before {
    content: attr(title);  
  } 
  .image img {
     display: block;
     width: 640pt;
   }
</style>
<div class="image" title="Information here"><img ... ></div>
于 2011-03-28T13:02:55.887 に答える