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>
      .container {
      position: relative;
      text-align: center;
      color: #000000;
      font-size: 30px;
      }
      .bottom-left {
      position: absolute;
      bottom: 8px;
      left: 16px;
      }
      .top-left {
      position: absolute;
      top: 8px;
      left: 16px;
      }
      .top-right {
      position: absolute;
      top: 8px;
      right: 16px;
      }
      .bottom-right {
      position: absolute;
      bottom: 8px;
      right: 16px;
      }
      .centered {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <h2>Über einem Bild positionierter Text</h2>
    <div class="container">
      <img src="https://www.w3docs.com/uploads/media/default/0001/03/faa2b10a44e1d88ddafbf7ab6002ce24659529d4.jpeg" alt="Snow" style="width:100%;">
      <div class="bottom-left">Bottom Left</div>
      <div class="top-left">Top Left</div>
      <div class="top-right">Top Right</div>
      <div class="bottom-right">Bottom Right</div>
      <div class="centered">Center</div>
    </div>
  </body>
</html>