Schrift mit transparentem Hintergrund über die volle Breite des Bildes.

[Fabi21001]

Hallo zusammen,

Ich habe ein kleines Problem. Und zwar möchte ich einen kleinen Text mit transparentem Hintergrund über ein Bild schreiben. Das hat auch geklappt, jedoch weiss ich nicht, wie man den Transparenten "Balken" hinter dem Text über die komplette Breite des Bildes legen kann.

Mein bisheriger Code:

Css:

      .container {
      position: relative;
      text-align: center;
      color: #000000;
      font-size: 30px;
      }
      .centered {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      }
      #p1 {
        font-size: 40px;
        color: white;
        background-color:rgba(85,85,85,0.55);
      }

Html:

    <div class="container">
        <img src="kabel.jpg" alt="Kabel" style="width: 100%">
      <div class="centered"><p id="p1">Kabel</p></div>
    </div>