Comment puis-je obtenir un effet de flou défini dans CSS3 tout en préservant les bords nets ?-tutoriel CSS-php.cn

How Can I Achieve a Defined Blur Effect in CSS3 While Preserving Sharp Edges?

Obtention de bords définis avec le filtre flou CSS3

Lors de l'application d'un effet de flou à une image à l'aide de la propriété de filtre CSS, un problème courant survient : les bords de l'image deviennent également flous. Cela peut entraîner un résultat indésirable, en particulier lorsque des lignes ou des détails nets doivent être préservés.

Pour résoudre ce problème et conserver des bords définis, une technique intelligente peut être utilisée. En plaçant l'image floue dans un

et en appliquant certains styles CSS, il est possible de créer un effet de "flou incrusté".

L'extrait de code suivant montre comment obtenir cet effet :

img {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    margin: -5px -10px -10px -5px;
}

div {
    overflow: hidden;
}

Copier après la connexion

Dans ce code, le < ;img> L'élément est contenu dans un

avec débordement défini sur caché. Cela garantit que l'image floue est recadrée sur les bords du

, éliminant ainsi le débordement de l'effet de flou sur l'environnement.

De plus, des marges négatives sont appliquées au élément pour le décaler légèrement dans le

. Les valeurs de ces marges peuvent être ajustées pour créer la quantité de flou souhaitée tout en préservant les bords.

Cette technique crée efficacement un effet de flou défini, gardant les bords de l'image nets tout en adoucissant les détails à l'intérieur.

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!

source：php.cn

Article précédent：Comment puis-je personnaliser la zone de saisie des couleurs dans les navigateurs Webkit ? Article suivant：Comment les paramètres de liaison de fichiers empêchent-ils la mise en cache ?

Déclaration de ce site Web

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

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2205

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2354

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1972

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...