Question

我有以下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>

：之前不会出现图片，但它适用于任何div。

为什么？

更新：我在W3C中找到了这个解释：

请注意。此规范未完全定义：替换元素（例如HTML中的IMG）之前和之后的交互。这将在未来的规范中更详细地定义。

更新2：

我忘了提 - 我需要用CSS可视化图像的“alt”属性。

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

Answer 1

考虑到你引用的规范，我想这是你必须将图像包装在一个元素中并在其上应用: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>

：伪类之前不适用于图像

1 个答案: