Comment garder les bords nets lors du flou d'une image avec le filtre CSS3 ?-tutoriel CSS-php.cn

Comment garder les bords nets lors du flou d'une image avec le filtre CSS3 ?

DDD

Libérer： 2024-11-29 15:24:13

original

643 Les gens l'ont consulté

How to Keep Edges Sharp When Blurring an Image with CSS3 Filter?

Conserver les bords définis avec le filtre CSS3 Blur

Lors de l'application de la propriété filter: blur() à une image à l'aide de CSS3, les bords du l’image peut également devenir floue. Cela peut ne pas être souhaitable si vous souhaitez conserver les bords nets tout en rendant flou le reste de l'image.

Solution : Marges négatives avec débordement caché

Pour obtenir des bords nets tout en rendant une image floue, vous pouvez l'entourer d'un

et appliquez des marges négatives au champ élément. Cette technique consiste à définir le débordement : caché ; sur le

, qui maintient l'image floue dans ses limites :

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

Cette approche produit une sortie où les bords de l'image restent nets tandis que le reste de l'image est flou . Les marges négatives sur le L'élément agit comme une « zone tampon » autour de l'image, garantissant que l'effet de flou ne s'étend pas au-delà de ces limites.

Démo :

[Image d'un chaton avec bords nets et arrière-plan flou]

HTML :

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

Copier après la connexion

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：Pourquoi « .foo a:link » remplace-t-il « a:hover » dans la spécificité CSS ? Article suivant：Comment empêcher les éléments Flexbox de s’étirer pour remplir l’espace disponible ?

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