Comment reproduire l'effet de flou d'iOS 7 à l'aide de CSS ?

Effet de flou d'iOS 7 avec CSS : un examen plus approfondi

iOS 7 d'Apple a introduit un effet de superposition flou visuellement attrayant. Bien que cela puisse sembler être une simple question de transparence, cet effet implique plus que ce que l'on voit.

Question : Comment pouvons-nous reproduire cet effet en utilisant CSS et, si nécessaire, JavaScript ?

Réponse :

CSS 3 propose une solution 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>

Le filtre flou() ajoute un effet de flou au élément, tandis que la propriété opacity contrôle la transparence. Pour affiner l'effet, expérimentez différentes valeurs pour flou() et opacité.

Exemple :

Explorez un exemple en direct de ce code en action sur JSFiddle.

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!