使用img的title属性作为图像图例？

Question

我想使用img标签的title属性内容在图像下写一个图例：

<img title="This is my cat's legend" src="pet-cat-eye.jpg"/>

必须显示为波纹管：

  +--------------+
  |              |
  |     _ _/|    |
  |    \'o.0'    |
  |    =(___)=   |
  |      U U     |
  +--------------+
This is my cat's legend

我只想使用CSS。有可能实现吗？

我已经尝试过img[title*=legend]周围的一些实验，但是并没有如我所愿的显示出来。

Answer 1

您好，欢迎来到 StackOverFlow ！

图像属性不是要在图片下方显示。
相反，您可以在图像声明下使用诸如<figcaption>之类的东西将其放置在图片下。

考虑到这一点，您编写的代码将看起来像这样：

<figure>
  <img alt="cat picture" src="pet-cat-eye.jpg"/>
  <figcaption>This is my cat's legend</figcaption>
</figure>

让我知道是否可行！

有关进一步的说明： 当您将鼠标悬停在图片上作为工具提示时，将使用title属性。