image - 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元素有一个自闭合标签，所以你不能给它子元素并期望它工作。它的内容模型被定义为空。来源。

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

Answer 3

好语气的规则。

1. 在 IMG 标签中使用空源。
2. 对 WebKit 浏览器使用 CSS content:""。
3. 通过JavaScript插入元素。在 HTML 中清除不影响。

您也可以使用伪元素。

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