Pouvez-vous flouter une image tout en gardant ses bords nets ?

Bords définis avec le filtre CSS3 Flou d'arrière-plan

Les images floues ajoutent une touche de douceur et de profondeur, mais compromettent souvent la netteté des bords. Pouvons-nous obtenir un effet flou tout en préservant des contours nets ?

Solution : Div avec débordement et négatif Marges

CSS :

div {
  overflow: hidden;
}

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

HTML :

<div><img src="image.jpg" /></div>

Cette solution place l'image floue dans un div avec débordement caché. En définissant des marges négatives sur l'image, nous la décalons dans le div, révélant les bords d'origine non flous.

Démo :

[Image d'une image floue avec des bords définis ]

Comment ça marche :

• Le div empêche l'image floue de déborder au-delà de ses limites.
• Les marges négatives poussent l'image légèrement vers l'intérieur, révélant le bord extérieur non flou.
• Le filtre de flou s'applique à l'image, ajoutant de la profondeur tout en laissant le bords intacts.

Cette technique simule efficacement un effet de « flou incrusté », offrant la combinaison souhaitée de flou et de netteté.

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!