Frage zu HTML5 und CSS3 (Transparenz)

  • Ich habe mir eine neue Homepage gebastelt und lege über das Hintergrundbild einen <article> mit einer opacity von 0.9 damit das Hintergrundbild noch leicht durchscheint


    Nun enthält dieser Artikel auch ein Bild mit hohem Weissanteil. Natürlich wird dieses nun auch mit der entsprechenden Transparenz angezeigt, da das Bild ja ein Teil des Artikels ist. Gibt es eine Möglichkeit dieses Bild ohne diese Transparenz einzubinden (also die opacity des article für das Bild zu überschreiben)?

    _T_
    HO2
    IW0
    GE0

    HR4 (konvertierte 2019 nach 8 1/2 Jahren von Android zu iOS)  iPhone 12 Pro  Apple Watch Series 8 45mm GPS + LTE  MacBook Air M2 

  • Hallo!


    Dann musst Du für dieses Bild oder den "article" einfach nur eine eigene Klasse mit den passenden Parametern anlegen.



    Gruß, René

    Wenn die Kuh schon im Brunnen liegt, ist es unsinnig noch einen Deckel draufzumachen.


    Öffne Dein Herz und Du wirst die Welt sehen,

    öffne Deinen Geist und Du wirst sie verstehen.

  • nein IMHO das geht nicht so einfach.
    aufgrund der vererbung und der tatsache dass es max. opacity 1.0 gibt, hat dann alles in dem container max. 0.9 opacity. es ist damit nur eine stellenweise weitere verringerung möglich, nicht eine erhöhung.
    das einzige was da geht ist das bild syntaxisch ausserhalb dem container einzufügen und ggf. optisch im text zu positionieren.
    z.b.
    <article>
    <text>blabla mit 0.9 opacity</text>
    <bild>bild mit 1.0 opacity und passender positionierung</bild>
    </article>


    vielleicht wäre es aber sowieso besser, wenn nur der background etwas durchscheinen lässt und nicht alles im container?dann einfach die transparenz auf die hintergrundfarbe des containers geben. dann scheint es durch und text+bilder etc. scheinen nicht durch.

  • Danke für Eure Tipps.


    mumpel: Ich hatte folgendes Probiert, es funktionierte aber leider nicht.

    Code
    <img src="./images/me.jpg" style="max-width:100%;opacity:1;" alt="me">


    Aber durch den Tipp von stanglwirt bin auf ein interessantes Style-Attribut gestoßen. Und aus

    Code
    background:#FFFFFF;
    opacity:0.8;


    wurde


    Code
    background-color: rgba(255, 255, 255, 0.8);


    und nun klappt alles wie es soll.


    Vielen Dank für Eure Hilfe. :top:
    [small]Beim Telefon-Treff ist man mit jedem Thema immer gut aufgehoben! Danke![/small]

    _T_
    HO2
    IW0
    GE0

    HR4 (konvertierte 2019 nach 8 1/2 Jahren von Android zu iOS)  iPhone 12 Pro  Apple Watch Series 8 45mm GPS + LTE  MacBook Air M2 

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!