Wie erstelle ich in CSS einen dynamischen, unscharfen Hintergrund im Vista/7-Stil, ohne den Inhalt zu beeinträchtigen?

Unscharfer Hintergrund mit CSS

Frage:

Wie können Sie einen dynamischen, unscharfen Hintergrund im Vista/7-Stil erstellen? Wirkung in CSS, ohne den Inhalt innerhalb des Elements zu beeinflussen?

Antwort:

Aktualisiert (Oktober 2016):

SVG-Filter und Pseudo-Element verwenden:

Ein einfacherer Ansatz besteht darin, ein Pseudo-Element in Kombination mit einem SVG-Unschärfefilter zu verwenden. Diese Technik vermeidet das Verwischen des Inhalts und bietet eine breitere Browserunterstützung, einschließlich Firefox, Chrome und Opera.

Originallösung:

Verwenden von -moz-element( ) mit SVG-Filter (nur Firefox):

1. Verwenden Sie die Eigenschaft -moz-element(), um das unscharfe Element als Hintergrundbild zu definieren.
2. Wenden Sie eine SVG-Unschärfe an Filtern Sie auf das Hintergrundelement.
3. Optional können Sie jQuery verwenden, um das Scrollen zu aktivieren, wenn der Hintergrund fixiert ist.

Diese Lösung ist zwar auf Firefox beschränkt, bietet aber eine praktikable Option, um das zu erreichen gewünschte Wirkung.

Das obige ist der detaillierte Inhalt vonWie erstelle ich in CSS einen dynamischen, unscharfen Hintergrund im Vista/7-Stil, ohne den Inhalt zu beeinträchtigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!