Wie kann man einem Text oder einem Bild mit CSS einen transparenten Hintergrund geben

Source Code: (back to article)

<!DOCTYPE html> 
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      body {
      background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg") no-repeat;
      background-size:cover;
      }
      p {
      width:50%;
      padding:10px;
      margin:10% auto;
      color:#fff;
      position:relative;
      }
      p:after {
      content:'';
      position:absolute;
      top:0;left:0;
      width:100%; height:100%;
      background:#000;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
      filter: alpha(opacity=40);
      -moz-opacity: 0.4;
      -khtml-opacity: 0.4;
      opacity: 0.4;
      z-index:-1;
      }
      img {
      display:block;
      margin:.6em auto;
      }
    </style>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
      <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" />
    </p>
  </body>
</html>