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 回答