Dưới đây là mã nguồn để đặt khối văn bản lên trên hình ảnh tại vị trí cụ thể (góc dưới phải) bằng CSS:
Ví dụ
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .imageContainer { display: inline-block; position: relative; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif } .captionBlock { position: absolute; bottom: 20px; right: 20px; background-color: rgb(14, 0, 94); color: rgb(255, 255, 255); padding-left: 20px; padding-right: 20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } </style> </head> <body> <h1>Image Text Block Example</h1> <div class="imageContainer"> <img src="https://i.picsum.photos/id/59/500/500.jpg" alt="Nature" style="width:100%;"> <div class="captionBlock"> <h3>Scenary</h3> <h4>Fence on the ground</h4> </div> </div> </body> </html>
Kết quả
Mã trên sẽ cho ra kết quả như sau:
