J'ai reçu aujourd'hui une demande pour utiliser l'effet de flou gaussien pour flouter une page. Je viens d'en profiter pour faire le tri dans les deux API de flou gaussien en CSS3.
illustrer:
Cette API est un filtre qui peut non seulement obtenir un flou gaussien, mais également bien d'autres choses telles que le décalage des couleurs, la saturation, les niveaux de gris, etc.
grammaire:
// Utiliser des espaces pour séparer plusieurs filtres filter: none; //Filtre de flou gaussien : flou(4px); //Filtre de luminosité linéaire : luminosité(); // Filtre de contraste : contrast(); // Filtre d'effet d'ombre : drop-shadow(); //Filtre en niveaux de gris : niveaux de gris(); // Filtre de rotation de teinte : hue-rotate(); //Inverser le filtre d'image : invert(); //Convertir le filtre de transparence : opacity(); // Filtre de saturation : saturer(); // filtre marron : sépia(); // Filtre filtre SVG : url();
Parmi eux, filter: blur();
illustrer:
Lorsque vous créez un élément et ajoutez cet attribut, des effets (tels que du flou ou un changement de couleur) seront ajoutés à la zone située derrière l'élément.
contraste:
L'attribut filter doit être chargé sur l'image ou l'image d'arrière-plan, tandis que le background-filter doit uniquement être un élément.
grammaire:
filtre de toile de fond : flou (2 px ); filtre de toile de fond : luminosité (60 %) ; filtre de toile de fond : contraste (40 %) ; filtre de toile de fond : ombre portée (4px 4px 10px bleu) ; filtre de toile de fond : niveaux de gris (30 %) ; filtre de toile de fond : teinte-rotation (120 deg ); filtre de toile de fond : inverser (70 % ); filtre de toile de fond : opacité (20 %) ; filtre de toile de fond : sépia (90 %) ; filtre de toile de fond : saturer (80 %) ;
<!DOCTYPEhtml>
<html lang="fr">
<tête>
<style>
.wrapBox2 {
largeur : 800 px ;
hauteur : 300px ;
débordement : caché ;
position : relative ;
image d'arrière-plan : url("./win.jpeg");
taille de l'arrière-plan : 100 % 100 % ;
répétition d'arrière-plan : pas de répétition ;
filtre : flou (10 px );
}
.subBox {
position : absolue ;
largeur : calc(100% - 100px) ;
hauteur : calc(100% - 100px) ;
indice z : 2 ;
}
.texte {
position : relative ;
/* indice z : 10 ;
taille de police : 40 px ;
poids de la police : gras ;
couleur : #f00 ;
}
</style>
</tête>
<corps>
<div class="wrapBox2">
<div class="subBox"></div>
<div class="text">Tout flou</div>
</div>
</corps>
</html> 
Une chose à noter ici est qu'après l'ajout du flou, la taille réelle dépassera la largeur et la hauteur que nous avons définies en raison de l'effet de bavure environnant. Vous pouvez envelopper un calque à l'extérieur et définir overflow: hidden;
<!DOCTYPEhtml>
<html lang="fr">
<tête>
<style>
.wrapBox2 {
largeur : 800 px ;
hauteur : 300px ;
/* débordement : caché */
position : relative ;
}
.subBox {
largeur : 100 % ;
hauteur : 100 % ;
position : absolue ;
largeur : calc(100% - 100px) ;
hauteur : calc(100% - 100px) ;
indice z : 2 ;
filtre : flou (10 px );
}
.texte {
position : relative ;
/* indice z : 10 ;
taille de police : 40 px ;
poids de la police : gras ;
couleur : #f00 ;
}
</style>
</tête>
<corps>
<div class="wrapBox2">
<img src="./win.jpeg" class="subBox" />
<div class="text">Tout flou</div>
</div>
</corps>
</html> 
De cette façon, puisque le texte et l'image sont au même niveau, le texte est soit en dessous de l'image, soit au-dessus de l'image (contrôlé selon le z-index) sans flouter le texte.
<!DOCTYPEhtml>
<html lang="fr">
<tête>
<style>
.wrapBox2 {
largeur : 800 px ;
hauteur : 300px ;
débordement : caché ;
position : relative ;
image d'arrière-plan : url("./win.jpeg");
taille de l'arrière-plan : 100 % 100 % ;
répétition d'arrière-plan : pas de répétition ;
}
.subBox {
position : absolue ;
largeur : calc(100% - 100px) ;
hauteur : calc(100% - 100px) ;
indice z : 2 ;
filtre de toile de fond : flou (10 px );
/* haut : 100px ;
}
.texte {
position : relative ;
/* indice z : 10 ; */
taille de police : 40 px ;
poids de la police : gras ;
couleur : #f00 ;
}
</style>
</tête>
<corps>
<div class="wrapBox2">
<div class="subBox"></div>
<div class="text">Partiellement flou</div>
</div>
</corps>
</html> 
Comme vous pouvez le voir, l'attribut background-filter n'a pas besoin d'être défini sur un élément image, mais sur n'importe quel élément, je pense que cette méthode est plus flexible.
Bien entendu, l’utilisation de background-filter peut également satisfaire le premier scénario.
Ceci conclut cet article sur l'utilisation du filtre et du filtre d'arrière-plan pour obtenir un effet de flou gaussien (exemple de code). Pour plus de contenu sur le flou gaussien CSS, veuillez rechercher les articles précédents sur downcodes.com ou continuer à parcourir les articles connexes ci-dessous, j'espère. vous soutiendrez davantage downcodes.com à l’avenir !