Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Blur des Body Background-image hinter semi-transparenter Navigation
#1
Werte Community,

folgendes Problem: ich versuche derzeit eine Navigationsleiste mit unscharfem Hintergrund zu erzeugen. Das eigentliche Hintergrundbild wechselt randomisiert über jquery als Background-image des Body-Elements. Die Navigationsleiste ist somit auf semitransparenz geschalten und was nun durchscheint müsste unscharf werden. Hinzukommend ist die Navigationsleiste sowie das Background-image des Body-Elements responsive. Da mit CSS diesem Problem nicht beizukommen ist, frage ich hier im Javascript-Abteil ob jemandem eine Lösung bekannt wäre.

Beste Grüße, Virtus_ex_machina
Zitieren
#2
Das sollte mit CSS Filtern gehen: http://html5-demos.appspot.com/static/cs...index.html
Zitieren
#3
Danke. Diesen Ansatz hatte ich jedoch schon ohne Erfolg versucht. Die CSS-Filter beziehen sich ja nur auf das jeweilige Element und beachten nicht was darunter liegt. Daher hilft mir -webkit-filter: blur(?px); nicht weiter. Wende ich blur auf die Navigation an wird der Vordergrund samt Navigation unscharf, nicht jedoch das Hintergrundbild in diesem Bereich. Lege ich ein absolutes Div-Element durch z-index zwischen Background und Navigation hat dies keine Auswirkungen auf das Hintergrundbild. Ich kann dieses Div jedoch auch nicht mit dem Hintergrundbild versehen, da sich dieses mithilfe von Cover anpasst. Wende ich blur auf das Hintergrundbild an wird alles unscharf. Allenfalls bräuchte ich ein räumlichpartielles Blur das oben andockt und in der Höhe variabel ist.
Zitieren
#4
Hi,
ohne ein konkretes Beispiel oder Link auf die Seite wo dieses Problem besteht, kann man schlecht weiterhelfen.
Gruß
His.Master's.Voice
Zitieren
#5
Code:
...Head...
<body style="background-image: Url(...); background-size: cover;">
<div id="nav" style="width:100%; height:50px">
...Navigation...
</div>
...Content

Hier ein Codebeispiel zur reinen Versinnbildlichung. Es geht mir darum, dass der Bereich hinter dem Nav-div das Hintergrundbild des Bodyelements nur unscharf durchscheinen lassen soll.
Zitieren
#6
Das geht nicht. Du könntest höchstens der navigation eine halb transparente Hintergrundfarbe geben.

Gesendet von meinem Nexus 5 mit Tapatalk
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste