Maison  >  Article  >  interface Web  >  Comment reproduire l'effet de flou d'iOS 7 à l'aide de CSS ?

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

Barbara Streisand
Barbara Streisandoriginal
2024-11-01 02:35:27566parcourir

How to Replicate iOS 7's Blur Effect Using 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn