Hintergründe mit CSS verwischen: Unscharfe Inhalte vermeiden

Unscharfe Hintergründe können die Ästhetik einer Website verbessern und die Aufmerksamkeit auf wichtige Inhalte lenken. Was aber, wenn sich die Unschärfe unbeabsichtigt auf den Inhalt selbst auswirkt?

In diesem Beispiel wird versucht, das Hintergrundbild unscharf zu machen und gleichzeitig die Klarheit des Vordergrundtextes innerhalb eines Span-Elements beizubehalten. Um dies zu erreichen, kann CSS strategisch eingesetzt werden.

Die Schlüsseltechnik besteht darin, die Pseudoklasse :before zu verwenden, um das Hintergrundbild zu erben. Ein neues div-Element mit der Klasse „blur-bgimage“ wird eingeführt und eine :before-Pseudoklasse hinzugefügt. Dieses Pseudoelement erbt das Hintergrundbild mithilfe der Eigenschaft „background: inherit“.

Als nächstes wird das Pseudoelement „:before“ mithilfe von CSS-Filtern effektiv unscharf gemacht. Durch die Einbeziehung dieser Filter (in diesem Fall Unschärfe (10 Pixel)) erhält das Hintergrundbild den gewünschten Unschärfeeffekt.

Dem „.blur-bgimage“-Div wird dann „overflow:hidden“ zugewiesen, um den unscharfen Bereich dahinter zu verbergen die Grenzen der Div. Rand, Textausrichtung und Z-Index werden ebenfalls entsprechend eingestellt.

Um den Unschärfeeffekt umzuschalten, kann JavaScript verwendet werden, um die Klasse „.blur-bgimage“ hinzuzufügen oder zu entfernen, wie im bereitgestellten jsfiddle-Beispiel gezeigt . Mit dieser Methode kann der Hintergrundunschärfeeffekt dynamisch gesteuert werden, ohne die Klarheit des Inhalts zu beeinträchtigen.