Thẻ Div trong thẻ img

Question

Tôi cần thêm văn bản trên mỗi hình ảnh và tôi có thư viện hình ảnh được tạo bằng thẻ img. Tôi không thể thêm thẻ div vào thẻ img. Tương tự như được hiển thị ở đây:

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

Mặc dù div được thêm vào thẻ img nhưng tôi không thấy văn bản "HELLO1_1" trên hình ảnh.

Xin ai có thể giúp tôi? Nếu bạn cần mã nguồn, tôi có thể chia sẻ nó với bạn.

Dưới đây là liên kết để kiểm tra kịch bản: http://jsfiddle.net/XUR5K/9/

Answer 1

Một thẻ hình ảnh không thể có yếu tố con. Thay vào đó, bạn cần định vị DIV ở trên cùng của hình ảnh bằng cách sử dụng CSS.

Ví dụ:

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

Đó là một ví dụ. Có rất nhiều cách để làm điều này.

Answer 2

Phần tử img có thẻ tự đóng, vì vậy bạn không thể cung cấp cho nó các phần tử con và mong đợi nó hoạt động. Mô hình nội dung của nó được định nghĩa là trống. Source.

Tôi nghi ngờ bất kỳ trẻ em nào bạn chỉ định sẽ không được hiển thị vì phần tử img là một phần tử thay thế, như đã đề cập trong thông số W3C.

Answer 3

Quy tắc có âm tốt.

1. Sử dụng null nguồn trong thẻ IMG.
2. Sử dụng nội dung CSS : "" cho trình duyệt WebKit.
3. Chèn phần tử qua JavaScript. Xóa trong HTML không ảnh hưởng.

Bạn cũng có thể sử dụng các phần tử giả.

Ví dụ: https://github.com/Alexei03a/canvas-img