Blur mit HTML & CSS

baeri

Erfahrenes Mitglied
Hi,

ich suche nach einer Möglichkeit ein "Vordergrundelement" mit einem "Blureffekt" zu versehen, welcher sich auf dem Hindergrund auswirkt...

> Allerdings sollte dies kein "fester" Hintergrund sein, sondern "eigentlich" alle darunterliegenden Elemente welche sogar beweglich (scrollbar) sind <- Text, Bilder, Shapes...

hier habe ich ein Konzept gefunden, welches einen Blureffekt genau so macht wie ich mir das vorstelle:
https://jsfiddle.net/baer777/51grzx8k/1/

allerdings eben NUR auf das Hintergrundbild und dies nicht beweglich :/
Hier kann man gut sehen, dann der Hintergrund eigentlich "kopiert" wird:
https://jsfiddle.net/baer777/51grzx8k/2/

gibt es evtl. eine Bibliothek <- gerne auch Javascript die das "unkompliziert" umsetzt?
 
Dies sollte über das entsprechende Bild gehen.

Beispielsweise:
HTML:
<img id="hintergrundbild_mit_Blureffekt" src="SRC_ZUM_BILD"/>
CSS:
#hintergrundbild_mit_Blureffekt {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
 
hö??? das ist doch noch weniger als das was ich bereits habe?

Ich kenne den Hintergrund doch nicht! Dieser wird doch Dynamisch generiert aus (wie bereits erwähnt), Text, Shapes und Bilder...
=> Wie ich das Bild mit Blur effekt erzeugen kann, habe ich ja bereits <- wenn auch nicht beweglich...

Jetzt brauch ich das ganze 1. Beweglich und 2. für alle darunter liegenden Elementen...

Ein Bild mit Blureffekt zu erzeugen ist nicht die echte Problematik :/
 
nein,....

du erkennst doch den Fehler, dass beim Scrollen, das Bild hinter der Box (das blured element) NICHT mitscrollt <- und auch nicht perfekt passt...

Obendrein will ich nicht nur das Bild als blured element haben sondern auch noch alles andere was zwischen Bild und Box liegt <- da häng ich aber schon, ich bekomme noch nicht mal was "dazwischen" ...

=> also will ich Faktisch über eine "ganz normale Seite" mit Text, Elementen und Bildern >eine Box legen< (welche irgendwelche undefinierten Elemente enthält) FIXIERT also mit einer festen Position. Unterhalb der Box soll die Seite aber noch sichtbar sein (aber nicht halbtransparent sondern mit einem Blur <- also verschwommen)
 
Dann mach doch den Blureffekt über den Body oder DIV bereich der mit Werten belegt ist, wie du ihn benötigst, da wo du es haben möchtest :)

Ansonsten steh Ich selbst auf dem Schlau und bin raus :D
 
Das könnte, ich, ist aber eben auch nicht das Ziel, weil wie erwähnt soll nur ein "kleiner fester ausschnitt" für den Kompletten "beweglichen Bereich" den blur effekt erzeugen...

... leider bin ich mir sicher, dass CSS alleine das nicht hinbekommt...
> evtl. kann ein Moderator das ins Javascript Forum verschieben...
 
Das kann CSS, wie gesagt wenn es nur ein Fensterausschnitt sein sollte, dann via Body, DIV oder whatever Element.
Die Scrollbar kann ebenso über CSS gesteuert werden :)
 
leider kein beispiel hierfür bisher gefunden... <- GENAU DESHALB schreibe ich ja hier im Forum...

"dann mach halt wie dus willst" ist leider nicht hilfreich...
 
Zurück