显示图像标签内的文本

Question

<img src='Assets/image.png'>some text</img>如果我必须显示“某些文本”，是否可以？

我知道我可以只使用 div 并将 div 设置为显示在图像顶部的样式，但我想知道是否有可能让标签内的文本显示出来。

Answer 1

不。img 内没有文字。根据规范，img 元素是一个空元素，即它没有任何内容或结束标记。

好消息是，在您的示例源中，文本“some text”将显示在页面上。（从技术上讲，它不在 img 内部，因此它只是在之后直接显示。）但这可能不是您想要的......

可能的解决方案是：

• 如果您希望在无法显示图像时显示文本而不是图像，请将文本放入属性内alt。
• 对于当用户将鼠标悬停在图像上时显示的文本，请使用title属性
• 要在页面中同时显示图像和文本，请使用figure在其中放置 的元素，img并将文本放置在 中figcaption，并使用 CSS 定位将Figcaption 放置在图像顶部。
  

  figure {
    position: relative
  }
  figcaption {
    position: absolute;
    width: 200px;
    line-height: 150px;
    text-align: center;
    left: 0;
    top: 0;
    text-shadow: 0 0 1px white;
    font-weight:bold;
  }

  <figure>
    <img src="http://lorempixel.com/200/150" />
    <figcaption>some text</figcaption>
  </figure>