当前位置: 动力学知识库 > 问答 > 编程问答 >

html - display the text inside of an image tag

问题描述:

Is it possible if I have <img src='Assets/image.png'>some text</img> to get the 'some text' to display?

I know I could just use a div and style the div to display on top of the image, but what I want to know is if it's in anyway possible to get the text inside the tag to show up.

网友答案:

No. There is no text inside the img. According to the specs, the img element is a void element, i.e. it doesn't have any content or an end tag.

The good news is that in your example source, the text "some text" will show up on the page. (It's technically not inside the img, so it is simply displayed directly after.) That's probably not what you want though...

Possible solutions are:

  • If you want a text that is displayed instead of the image whenever the image cannot be displayed, put the text inside the alt attribute.
  • For a text that is shown when the user hovers the mouse over the image, use the title attribute
  • To display both the image and the text in the page, use a figure element in which you put the img and put the text inside the figcaption and use CSS positioning to put the figcaption on top of the image.
    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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: