Comment obtenir l'effet de superposition floue d'iOS 7 avec CSS ?

Obtention de l'effet de superposition floue d'iOS 7 avec CSS

iOS 7 d'Apple a introduit un effet de superposition floue distinct qui s'étend au-delà de la simple transparence. Les développeurs se demandent souvent comment reproduire cette amélioration visuelle attrayante à l'aide des technologies Web.

Solution CSS

CSS 3 offre une méthode simple pour obtenir cet effet :

<code class="css">#myDiv {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.4;
}</code>

En ajoutant ce code CSS à un élément, vous pouvez appliquer l'effet de superposition floue. Le filtre 'flou()' définit la quantité de flou appliqué, tandis que 'opacité' contrôle la transparence de l'élément.

Exemple pratique

Voici un exemple JSFiddle qui démontre cette technique : https://jsfiddle.net/nwq9t/.

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!