recherche

Maison >interface Web >tutoriel CSS >Comment puis-je obtenir un effet de flou défini dans CSS3 tout en préservant les bords nets ?

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

Barbara Streisand
Barbara Streisandoriginal
2024-11-16 14:10:03300parcourir

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;
}

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!

css css3 while Filter using Property this overflow issue
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
Article précédent：Comment puis-je personnaliser la zone de saisie des couleurs dans les navigateurs Webkit ?Article suivant：Comment puis-je personnaliser la zone de saisie des couleurs dans les navigateurs Webkit ?

Articles Liés

Voir plus