Une brève discussion sur la façon d'obtenir un effet de verre dépoli avec CSS

Cet article vous permettra de savoir comment utiliser le CSS pour obtenir l'effet verre dépoli ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

J'ai vu l'effet verre dépoli d'un menu flottant sur le site officiel d'Apple

J'ai été impressionné par cet effet J'ai été attiré et après avoir fouillé dans le code source, j'ai découvert que cet effet ne pouvait être obtenu qu'avec deux propriétés CSS.

Adresse du site Web d'Apple https://www.apple.com.cn/macos/big-sur/ Si vous êtes intéressé, vous pouvez le consulter. Il y a des effets spéciaux plus intéressants. je dois dire la page d'Apple L'expérience est vraiment bien faite, vous pouvez l'étudier si vous êtes intéressé.

Attributs CSS clés

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

Ajouter une couleur d'arrière-plan avec une transparence de 0,72

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

backdrop-filter ajoute un filtre derrière l'élément , Au lieu d'éléments, deux filtres saturate et blur

sont ajoutés ici. Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!