Arrière-plans flous avec CSS : éviter le flou du contenu

Les arrière-plans flous peuvent améliorer l'esthétique du site Web et attirer l'attention sur le contenu clé. Mais que se passe-t-il si le flou affecte involontairement le contenu lui-même ?

Dans cet exemple, on tente de rendre flou l'image d'arrière-plan tout en préservant la clarté du texte de premier plan dans un élément span. Pour y parvenir, CSS peut être utilisé de manière stratégique.

La technique clé consiste à utiliser la pseudo-classe :before pour hériter de l'image d'arrière-plan. Un nouvel élément div avec la classe "blur-bgimage" est introduit et une pseudo-classe :before est ajoutée. Ce pseudo-élément hérite de l'image d'arrière-plan à l'aide de la propriété background:herit.

Ensuite, le pseudo-élément :before est effectivement flouté à l'aide de filtres CSS. En incorporant ces filtres (flou (10px) dans ce cas), l'image d'arrière-plan reçoit l'effet de flou souhaité.

Le div ".blur-bgimage" se voit ensuite attribuer un débordement : caché pour masquer la zone floue au-delà. les limites du div. La marge, l'alignement du texte et l'index z sont également définis de manière appropriée.

Pour activer l'effet de flou, JavaScript peut être utilisé pour ajouter ou supprimer la classe ".blur-bgimage", comme le montre l'exemple jsfiddle fourni. . Grâce à cette méthode, l'effet de flou d'arrière-plan peut être contrôlé dynamiquement sans compromettre la clarté du contenu.