Utilisez css filter:blur pour obtenir l'effet de flou des images (exemple de code)

Le contenu de cet article concerne l'utilisation de filtres CSS pour obtenir l'effet de flou des images. Les amis dans le besoin peuvent s'y référer. Sans plus tarder, jetons un œil au texte principal.

J'ai récemment rencontré un problème avec filter:blur en CSS. Tout d'abord, jetons un coup d'œil à une image sur la page, comme indiqué ci-dessous :

HTML :

<.>

<div class="imageContainer">
<img  src="/static/imghw/default1.png"  data-src="image/1.jpg"  class="lazy"   alt="Utilisez css filter:blur pour obtenir l'effet de flou des images (exemple de code)" >
</div>

CSS :

.imageContainer {
    border: solid 5px black;
    width: 1024px;
    height: 768px;
    }

Maintenant, appliquons un bel effet de flou :

img {
-webkit-filter: blur(30px);
}

L'effet est comme suit :

Observé que l'image est floue au-delà des bordures de son conteneur et qu'un effet "lueur" apparaît entre l'image floue et la bordure noire, résolvons maintenant ce problème.

Solution :

.imageContainer {
overflow: hidden;
}    
img {
+transform:scale(1.1);
}

L'effet est le suivant :

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!