x
<html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>* { box-sizing: border-box;}body { font-family: Arial; font-size: 17px;}.container { position: relative; max-width: 800px; margin: 0 auto;}.container img {vertical-align: middle;}.container .content { position: absolute; bottom: 0; background: rgb(0, 0, 0); /* Fallback color */ background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */ color: #f1f1f1; width: 100%; padding: 20px;}</style></head><body><h2>Responsive Image with Transparent Text</h2><div class="container"> <img src="/w3images/notebook.jpg" alt="Notebook" style="width:100%;"> <div class="content"> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.</p> </div></div></body></html>