使用 alt 标签优雅地注释图像

Elegantly annotate an image with the alt tag

本文关键字：注释 图像 alt 标签 使用      更新时间：2023-09-26

我想在悬停（或点击）时优雅地注释图像，其中包含该图像的alt标签的内容。我只想使用CSS（如果可能的话），不想使用jQuery，因为页面非常简单，我不想要任何多余的东西。

虽然我目前不能写JS，但我只能找到使用jQuery的类似示例：显示图像的alt标签 - jquery

谢谢。

使用 HTML5 <figure> 元素，您可以使用 <figcaption> 元素来显示图像的描述。这是您想要实现的目标的语义方法。alt属性适用于无法加载图像且与figcaption不同的情况。

<figure>
  <img src="/random-image.jpg" alt="Alt description">
  <figcaption>Here comes the description</figcaption>
</figure>

您可以通过CSS隐藏figcaption，然后点击（或单击）显示它。

你不能按照正确的说法使用 ：before 或 ：after@Pointy。这是一个自闭合元素，因此没有内容。仅属性。

但是，如果您可以控制实际替代文本的位置，则可以执行以下操作。它利用了content/attr CSS属性/组合。有关此内容的详细信息，请参阅David Walsh的帖子。

div {
    position:relative;
    width:500px;
    height:300px;
}
div:after {
    position:absolute;
    bottom:0;
    right:0;
    padding:10px;
    content:attr(data-alt);
    color:#FFF;
    background:#000;
}

后跟这样的HTML

<div data-alt="Sample Alt Text">
    <img src="//placeimg.com/500/300/any" />
</div>

编辑：如果要进行页面验证，请确保也向 img 添加 alt 属性。要么是空的alt=""，提供屏幕阅读器能够读出CSS内容（我不是100%确定这一点，可能取决于屏幕阅读器）。或者同时在 alt 属性中添加替代文本。

相关文章：