Wie kann ich mit CSS einen Vista/Windows 7 Aero Glass-Unschärfeeffekt für ein dynamisches Popup erzielen und dabei die browserübergreifende Kompatibilität wahren?

Hintergrund mit CSS verwischen, ohne den Inhalt zu beeinträchtigen

Frage:

Für ein dynamisches Popup auf einer Website möchten Sie ein Hintergrundunschärfeeffekt ähnlich dem Aero Glass von Vista/Windows 7. Wie können Sie dies in CSS erreichen und gleichzeitig die Kompatibilität mit modernen Browsern wahren?

Antwort:

Update (Oktober 2016):

Eine verbesserte Technik nutzt Pseudoelemente und SVG-Unschärfefilter. Sehen Sie sich die Demo unten an:

[Demo: Pseudo-Element für Hintergrundunschärfe verwenden](Demo-Link)

Dieser Ansatz funktioniert browserübergreifend, mit Ausnahme des IE, der Unschärfe nicht unterstützt über CSS- oder SVG-Filter.

Ursprüngliche Antwort (vor Oktober 2016):

Verwendung von -moz-element() und SVG-Unschärfefilter:

1. Verwenden Sie die Eigenschaft -moz-element(), um ein Element als Hintergrundbild für ein anderes Element zu definieren.
2. Wenden Sie den SVG-Unschärfefilter auf das Hintergrundbild an.
3. Optional können Sie jQuery zum Scrollen verwenden, wenn der Hintergrund fest positioniert ist.

Sehen Sie sich die Demo hier an:

[Demo: Verwenden von -moz- element() für Hintergrundunschärfe](Demo-Link)

Einschränkung:

Diese Methode ist aufgrund der Verwendung von -moz-element() auf Firefox beschränkt, was derzeit nur von Mozilla unterstützt wird. Es gab jedoch Bemühungen, es in Webkit-Browsern zu implementieren, sodass zukünftige Unterstützung erwartet wird.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS einen Vista/Windows 7 Aero Glass-Unschärfeeffekt für ein dynamisches Popup erzielen und dabei die browserübergreifende Kompatibilität wahren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!