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="image/1.jpg" alt="Utilisez css filter:blur pour obtenir l'effet de flou des images (exemple de code)" >
</div>

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

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

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

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!