Example of a Transparent Text Lorem Ipsum on an Image using RGBA color value|CSS Snippets|W3Docs

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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 opacity */
        color: #ffffff;
        width: 100%;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Transparent Text on an 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 is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </p>
      </div>
    </div>
  </body>
</html>