Comment obtenir des bords définis avec le filtre de flou CSS3 ?

Obtenir des bords définis avec le filtre flou CSS3

L'intégration de filtres CSS3 pour flouter les images améliore les effets visuels. Cependant, le filtre de flou par défaut s'étend au-delà des limites de l'image, ce qui entraîne des bords flous. Pour conserver les bords définis tout en rendant l'image floue, explorez la solution suivante :

Solution :

Enfermer l'image floue dans un

élément avec débordement : caché ; L'attribut empêche le filtre de déborder sur l'élément parent. De plus, en ajustant le paramètre les marges, comme le montre le code de démonstration ci-dessous, maintiennent les bords nets.

Démo :

[Image de la sortie souhaitée avec des bords définis et un arrière-plan flou]

CSS :

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

HTML :

<div><img src="http://placekitten.com/300" /></div>

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 html while Filter Attribute default overflow background

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