Hintergrundbild nur für einen Teil transparent machen

  • Hallo an die CSS Experten,


    Folgende Situation:


    Im <body> habe ich ein Hintergrundbild, welches den ganzen Bildschirm durch erscheinen soll.

    Im <article> soll nun dieses Hintergrundbild allerdings nur mit, sagen wir hier als Beispiel: 10% erscheinen.


    Wie immer führen viele Wege nach Rom und ich habe da eine Idee, aber die ist so richtig kompliziert.

    Mein Gefühl sagt mir, dass das mit parent/child in CSS machbar sein sollte. Dies ist allerdings ein Bereich, der bei CSS und mein Wissen noch eher zu den weißen Flecken gehört.

    Dazu habe ich zwar Beispiele gegoogelt, aber dort bin ich nicht so richtig weiter gekommen.


    Danke für einfache Codierungsansätze, gerne auch links.


    olkostbe

  • du willst in body und im article das gleiche Hintergrundsbild haben ? Dann geb den doch jeweils das Hintergrundsbild und setzt die 10% durchsichtigkeit mit opacity oder mit rgba().

    Oder wie meinst du das ?

  • Zweimal den gleichen Hintergrund verwenden hört sich für mich suspekt an.

    Kann es sein, dass Du im <article> Tag lediglich den Hintergrund nur zu 10% sehen willst?

    Dann würde ich den Background von <article> per rgba() auf Schwarz oder Weiß setzen, je nachdem, wie Du die Tönung willst, den Alpha-Wert variieren.


    Bspw.:

    Code
    ARTICLE { background:rgba(255,255,255,0.1); }
  • Offensichtlich war nicht klar was ich wollte:


    hier ein Bild:

    html-seminar.de/woltlab/attachment/1530/


    Oben <header> und an der Seite <aside> ist der Hintergrund zu 100% (soll auch so sein).

    Im <article> hier auch, soll aber nur zu 10% durchscheinen.


    Ich habe einfach mal von Arne Drews den Code eingegeben (war auch eine Idee von mir). Klappt aber nicht (siehe oben). Aber vielleicht habe ich wieder Tomaten auf den Augen und sehe den Fehler nicht.


    CSS

    Code
    html, body {
        margin: 0;
        padding: 0;
        background-image: url(bilder/ap-hintergrund.jpg);}
    
    article { 
        background:rgba(255,255,255,0.1);}

    Kurz an die opacity fans: wenn ich den article mit opacity: 0.1; gebe, dann verschwindet der Inhalt von <article> ins 10 % (also der Text) und nicht der Hintergrund. Habe ich auch schon getestet.


    Weitere Hinweise?

Jetzt mitmachen!

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