Eine kurze Diskussion darüber, wie man mit CSS einen Milchglaseffekt erzielt

In diesem Artikel erfahren Sie, wie Sie mit CSS den Milchglaseffekt erzielen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Ich habe den Milchglaseffekt eines schwebenden Menüs auf der offiziellen Website von Apple gesehen

Nachdem ich mich mit dem Quellcode befasst hatte, stellte ich fest, dass dieser Effekt nur mit zwei CSS erreicht werden kann Attribute.

Apple-Website-Adresse: https://www.apple.com.cn/macos/big-sur/. Wenn Sie interessiert sind, können Sie sich das noch ansehen Die Seitenerfahrung von Apple ist echt. Wenn Sie interessiert sind, können Sie sie studieren.

Wichtige CSS-Eigenschaften

background: rgba(29,29,31,0.72);

Fügen Sie eine Hintergrundfarbe mit einer Transparenz von 0,72 hinzu

backdrop-filter: saturate(180%) blur(20px);

backdrop-filter Fügen Sie einen Filter hinter dem Element hinzu, nicht dem Element, hier sind zwei Filtersaturate和blur

Weitere Programmierung Für verwandte Kenntnisse , besuchen Sie bitte: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion darüber, wie man mit CSS einen Milchglaseffekt erzielt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!