Вопрос по dom, html, image – Тег Div внутри тега img

6

Мне нужно добавить текст на каждое изображение, и у меня есть галерея изображений, построенная с использованием тегов img. Не могу добавить теги div под тегами img. Подобный показанному здесь:

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

Хотя div добавлен в тег img, но я не вижу текст "HELLO1_1" на изображении.

Пожалуйста, кто-нибудь может мне помочь? Если вам нужен исходный код, я могу поделиться им с вами.

Вот ссылка для проверки сценария: http://jsfiddle.net/XUR5K/9/

Вы должны описать то, что вы хотите достичь, вместо предполагаемого решения (которое не может работать). Люди в своих ответах высказывают разные догадки. Вы хотите показать подпись под (или над или в стороне) изображением, или вы хотите поместить какой-то текст внутри (поверх) изображения, как имя на карте? В вашем вопросе есть смешанные сигналы по этому вопросу. Jukka K. Korpela
Вы должны сделать это наоборот. Вместо этого поместите img в тег div. Eddy
Спасибо Эдди. Я изменил иерархию, и это сработало. KashCSS

Ваш Ответ

3   ответа
9

img Элемент имеет самозакрывающийся тег, поэтому вы не можете дать ему дочерние элементы и ожидать, что он будет работать. Его модель контента определяется какempty. Источник.

Я подозреваю, что любые указанные вами дети не будут воспроизведены, потому чтоimg элемент являетсяreplaced элемент, как указано в спецификации W3C.

-4

Use null source in IMG tag. Use CSS content:"" for WebKit browsers. Insert element through JavaScript. Clear in HTML does not affect.

Также вы можете использовать псевдоэлементы.

Пример:https://github.com/Alexei03a/canvas-img

9

жно расположить DIV поверх изображения с помощью CSS.

Пример:

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

Это всего лишь один пример. Есть много способов сделать это.

Спасибо всем за ваши ответы. Я изменил иерархию div и img, и это сработало. KashCSS

Похожие вопросы