Kann CSS eine Hintergrundunschärfe für halbtransparente Elemente erzielen, ohne den Inhalt zu beeinträchtigen?

Erzielen von Hintergrundunschärfe in CSS: Ein Leitfaden für dynamische transparente Effekte

Frage:

Es ist wünschenswert, eine zu erstellen Vista/7-Aero-Glass-Effekt in einem Popup-Fenster. Obwohl die browserübergreifende Kompatibilität keine Priorität hat, muss die Website in modernen Browsern funktionieren. Ist es möglich, den Hintergrund eines halbtransparenten Elements unscharf zu machen, ohne seinen Inhalt allein mit CSS zu beeinflussen?

Antwort:

Aktualisiert: Oktober 2016

Verwenden Pseudoelemente:

• Demo: [Live-Demo](Link)
• Verwenden Sie Pseudoelemente, um eine Hintergrundunschärfe zu erzeugen, ohne die des Containers zu beeinträchtigen Inhalte.
• Kombinieren Sie die Verwendung von Pseudoelementen mit der SVG-Unschärfe Filter.

Kompatibilität:

• Unterstützung für den SVG-Unschärfefilter ist in modernen Browsern weit verbreitet (außer IE).
• Pseudoelementunterstützung ist auf Firefox beschränkt.

Zuvor: Verwendung die -moz-element()-Eigenschaft:

• Demo: [Live-Demo](Link)
• Verwenden Sie die -moz-element() Eigenschaft in Kombination mit dem SVG-Unschärfefilter.
• Verwenden Sie jQuery zum Scrollen, wenn der Hintergrund fest ist Position.

Kompatibilität:

• Beschränkt auf Mozilla-Browser (-moz-element() ist auf Firefox beschränkt).
• Erfordert möglicherweise zusätzlichen Aufwand für die Implementierung in anderen Browsern.

Das obige ist der detaillierte Inhalt vonKann CSS eine Hintergrundunschärfe für halbtransparente Elemente erzielen, ohne den Inhalt zu beeinträchtigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!