img标签内的Div标签

Question

我需要在每个图像上添加一个文本，然后使用img标签构建图像库。我不能在img标签下添加div标签。与此处显示的类似：

<img id="img1" class="img1_1" src="hello1_1">
  <div class="textDesc">HELLO1_1</div>
</img>

虽然div附加到img标签，但我无法在图像上看到文字“HELLO1_1”。

请有人帮帮我吗？ 如果您需要源代码，我可以与您分享。

以下是测试方案的链接： http://jsfiddle.net/XUR5K/9/

Answer 1

图片代码不能包含子元素。相反，您需要使用CSS将DIV放在图像顶部。

示例：

<div style="position: relative;">
    <img />
    <div style="position: absolute; top: 10px;">Text</div>
</div>

这只是一个例子。有很多方法可以做到这一点。

Answer 2

img元素有一个自我结束标记，因此您无法为其提供子元素并期望它可以正常工作。其内容模型定义为 empty 。 Source

我怀疑你指定的任何孩子都不会被渲染，因为img元素是被替换的元素，如W3C规范中所述。

Answer 3

良好语气规则。

1. 在IMG标记中使用 null 来源。
2. 使用CSS 内容：“用于WebKit浏览器。
3. 通过 JavaScript 插入元素。 HTML中的清除不会影响。

您也可以使用伪元素。

示例：https://github.com/Alexei03a/canvas-img