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.

Der hier verwendete Code

<style> body { margin: 0; padding: 0; background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRpAOLDgSr81h91lPCrWo6rGRSBkZTEPecYdrTUZZbaT5e3KHKW8A); } header { width:100%; height:100px; border:5px solid black; box-shadow:5px 10px 10px white; text-align:center; font-size:50px; background:rgba(255,255,255,0.1); } article{ margin-top:150px; width:100%; height:100px; border:5px solid black; text-align:center; font-size:50px; background:rgba(255,255,255,.7); box-shadow:-5px -10px 10px white; } </style> <header>Header</header> <article>Hier steht nee mnge text drinne</article>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!