Cómo crear un texto de imagen transparente

HTML<div class="container"> <img src="https://blogger.googleusercontent.com/img/a/AVvXsEiN57feAIWHj15NvHiipo2tTYseuPBnn_SOpfZR0H_gYAr4iY7fRi3kLHVbacOeQ-mrobv4Cfwhq3_1l8qtK1RrLeLG2Akad2q4UYneneHZWX0bSxAZa5JNSmBdRixlnOn98DDq87gD2eU0QPB2iWWgzqDlLRFv7HyUntMMA3h6vsTWLsEkWgJHLoC5Kg" alt="Notebook" style="width:100%;"> <div class="content"> <h1>Hola</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>

CSS.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; }

JavaScript

Puede cambiar código para ver el resultado

Resultado ↓