Bilder auf transparentem Hintergrund ebenfalls transparent

  • Hallo!

    Habe über eine Box einen transparenten Bereich geschaffen:

    #mainbox {
    margin: auto;
    margin-top: 0px;
    width: 50%;
    background-color: #F27B24;
    opacity: 0.8;
    border: 1px grey solid;
    padding: 10px;
    overflow: auto;
    z-index:1;

    }

    Wenn ich nun in diesem Bereich Bilder einbinde, bekommen sie ebenfalls diese Transparenz. Das möchte ich aber nicht.
    Habe die Bilder mit einem Zoombefehl versehen (bei MouseOver wird das "Vorschaubild" dann groß). Bei diesen großen Bildern sieht die Transparenz richtig schlecht aus!
    Versuchte schon, bei diesen Style-Angaben für den Bilderzoom mit opacity: 1; weiter zu kommen, ging aber nicht.

    Wie kann ich Bilder in einer Box mit Transparenz intransparent machen?

    Danke für die Hilfe

  • Hallo

    Zitat

    Wie kann ich Bilder in einer Box mit Transparenz intransparent machen?

    Gar nicht. Mit opacity wird das nichts da opacity gnadenlos weitervererbt wird.

    Du musst eine Farbe mit Transparenz verwenden, zum Beispiel

    Code
    background-color: hsla(25, 89%, 55%, 0.8);

    In dem Beispiel bestimmt die 0.8 die Transparenz: 1 = Vollfarbe, 0 = komplett durchsichtig. Zulässig sind Werte zwischen 0 und 1, als Komma ist der Punkt erforderlich.

    Gruss

    MrMurphy