Comment définir l'effet de flou gaussien en CSS-tutoriel CSS-php.cn

Comment définir l'effet de flou gaussien en CSS

WBOY

Libérer： 2021-11-30 18:30:45

original

9141 Les gens l'ont consulté

En CSS, vous pouvez utiliser l'attribut filter et la fonction flou() pour obtenir l'effet de flou gaussien. L'attribut filtre est utilisé pour définir l'effet visuel de l'élément d'image. Utilisez-le avec la fonction flou() pour ajouter le flou gaussien. effet de flou sur l'élément d'image. La syntaxe est " Élément d'image {filtre: flou (valeur de flou);}".

Comment définir l'effet de flou gaussien en CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Comment définir l'effet de flou gaussien en CSS

Nous pouvons définir le flou gaussien sur l'image via l'attribut filter L'attribut filter définit l'effet visuel de l'élément (généralement Comment définir l'effet de flou gaussien en CSS ) (par exemple : flou et saturation).

Lorsque la valeur de l'attribut est flou (px), définissez le flou gaussien sur l'image. La valeur "rayon" définit l'écart type de la fonction gaussienne, ou le nombre de pixels fusionnés sur l'écran, donc plus la valeur est grande, plus elle est floue

S'il n'y a pas de valeur définie, la valeur par défaut est 0 ; ce paramètre peut définir la valeur de longueur CSS, mais n'accepte pas les valeurs de pourcentage.

Regardons-le à travers un exemple :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <style>
.img1 {
    filter: blur(5px);
}
    </style>
  <img  src="1118.02.png" class="img1" alt="Comment définir l'effet de flou gaussien en CSS" >
  <img  src="1118.02.png" class="img2" alt="Comment définir l'effet de flou gaussien en CSS" >
</body>
</html>

Copier après la connexion

Résultat de sortie :

Comment définir leffet de flou gaussien en CSS