Bild ohne Transparenz, obwohl der Hintergrund transparent ist

[sunshineh]

Hallo,
ich habe folgenden html-Code:

<section class="site-header flex-center mb-50 p-50 bgcolor-1 border-rounded">
  <i class="fas fa-heart fa-2x"></i>
  <img src="img/Unser Dorf.jpg" width="100%" alt="" class="img-dark border-rounded" />
</section>

Und möchte nun, dass das Bild nicht transparent ist, der Hintergrund aber schon.
Im bezugerigen CSS-File steht Folgendes:

.bgcolor-1 { background-color: #414951; opacity: 0.5; z-index: 1; }
.border-rounded { border-radius: 12px; }

.img-dark {
  opacity: 1;
  z-index: 2;
}

Ich dachte durch eine eigene Klasse geht es, klappt aber nicht.

 

[scatello]

JPG und Transparenz geht nicht, nutze GIF oder PNG. Außerdem solltest du Leerzeichen in Dateinamen vermeiden.

 

[Sempervivum]

opacity wirkt auf den ganzen Container mit allem was darin ist, einschl. des Bildes. Benutze statt dessen background-color im RGBA-Format, damit stellst Du die Transparenz nur für den Hintergrund ein:

        .bgcolor-1 {
            /* Statt background-color im Hex-Format und opacity
            fuer den ganzen Container benutzen wir background-color
            im RGBA-Format. Der letzte Wert gibt dabei die Transparenz an: */
            /* background-color: #414951; */
            background-color: rgba(65, 73, 75, 0.5);
            /* opacity: 0.5; */
            z-index: 1;
        }

        .border-rounded {
            border-radius: 12px;
        }

        .img-dark {
            /* Nur zum Testen: */
            width: 50%;
            /* Da jetzt die Transparenz nur auf den Hintergrund wirkt,
            brauchen wir dies nicht: */
            /* opacity: 1; */
            z-index: 2;
        }

 

[sunshineh]

Danke, hat geklappt!