Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Bild mit Textblock</title> <style> .parent { position: relative; } .text-block { position: absolute; bottom: 50px; left: 20px; background-color: #000; opacity: .6; color: white; padding-left: 20px; padding-right: 20px; } .parent img{ width:100%; } </style> </head> <body> <h2>Textblock auf einem Bild</h2> <div class="parent"> <img src="https://www.w3docs.com/uploads/media/default/0001/03/faa2b10a44e1d88ddafbf7ab6002ce24659529d4.jpeg" alt="Books" /> <div class="text-block"> <h3>Bücher</h3> <p>Lesen Sie gerne Bücher?</p> </div> </div> </body> </html>