Wie kann man ein Bild mit transparentem Text mit CSS erstellen

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      * {
      box-sizing: border-box;
      }
      .parent {
      position: relative;
      max-width: 800px;
      margin: 0 auto;
      }
      .parent img {
      vertical-align: middle;
      }
      .parent .text {
      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: #ffffff;
      width: 100%;
      padding: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Durchsichtiger Text auf einem Image</h2>
    <div class="parent">
      <img src="https://www.w3docs.com/uploads/media/default/0001/03/faa2b10a44e1d88ddafbf7ab6002ce24659529d4.jpeg" alt="Notebook" style="width:100%;">
      <div class="text">
        <h2>Title</h2>
        <p>Lorem Ipsum ist ein reiner Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und sie zu einem Musterbuch verarbeitete.</p>
      </div>
    </div>
  </body>
</html>