html - 使用 img 的标题属性作为图像图例?

标签 html css

<分区>

我想用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] 进行了一些实验,但没有像我希望的那样显示...

最佳答案

您好,欢迎来到 StackOverFlow!

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

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

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

如果可行,请告诉我!

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

关于html - 使用 img 的标题属性作为图像图例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54094848/

上一篇:php - Bootstrap 3 日历?

下一篇:html - 从 ul 中删除填充时如何将元素符号水平对齐到左侧?

相关文章:

javascript - 通过js更改切换按钮

css - 仅在一个部分/div 中 float 一个部分

jquery - 调整窗口大小时高度不会更新

javascript - 使用 Gatsby Js 在单击 anchor 时 react 切换事件类

javascript - OnClick 事件,将文本添加到 div,将其删除(如果存在),并按描述名称进行分组

javascript - Lytebox 画廊无法在画廊中使用 AngularJS 分页

jquery - 在响应模式下重新排序 Twitter Bootstrap 行

HTML 和 CSS 移动内容放大了吗?

javascript - 我如何知道我的电脑是否连接了耳机? HTML5 + JavaScript

css - 让:hover transition complete even when not hovering on element