Html img 标签中的 Div 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10425377/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div tag within img tag
提问by KashCSS
I need to add a text on each of the image and I have the image gallery constructed using img tags. Can't I append div tags under img tags. Similar to the one shown here :
我需要在每个图像上添加一个文本，并且我使用 img 标签构建了图像库。我不能在 img 标签下附加 div 标签。与此处显示的类似：
<img id="img1" class="img1_1" src="hello1_1">
<div class="textDesc">HELLO1_1</div>
</img>
Though the div is appended to img tag , but I cant see the text "HELLO1_1" on the image.
虽然 div 附加到 img 标签，但我看不到图像上的文本“HELLO1_1”。
Please can anyone help me? If you need the source code I can share it with you.
请任何人都可以帮助我吗？如果你需要源代码，我可以与你分享。
Here is the link to test the scenario : http://jsfiddle.net/XUR5K/9/
这是测试场景的链接：http: //jsfiddle.net/XUR5K/9/
回答by DA.
An image tag can not have child elements. Instead, you need to position the DIV on top of the image using CSS.
图像标签不能有子元素。相反，您需要使用 CSS 将 DIV 定位在图像顶部。
Example:
例子：
<div style="position: relative;">
<img />
<div style="position: absolute; top: 10px;">Text</div>
</div>
That's but one example. There's plenty of ways to do this.
那只是一个例子。有很多方法可以做到这一点。
回答by alex
The imgelement has a self closing tag, so you can't give it child elements and expect it to work. Its content model is defined as empty. Source.
该img元素有一个自关闭标签，所以你不能给它子元素并期望它工作。它的内容模型被定义为empty。来源。
I suspect any children you specify won't be rendered because an imgelement is a replacedelement, as mentioned in the W3C spec.
我怀疑您指定的任何子项都不会被呈现，因为img元素是替换元素，如 W3C 规范中所述。
回答by user1835582
Rules of good tone.
好语气的规则。
- Use nullsource in IMG tag.
- Use CSS content:""for WebKit browsers.
- Insert element through JavaScript. Clear in HTML does not affect.
- 在 IMG 标签中使用空源。
- 对 WebKit 浏览器使用 CSS content:""。
- 通过JavaScript插入元素。在 HTML 中清除不影响。
Also you can use pseudo elements.
您也可以使用伪元素。
