Bonjour,

J’aimerais ajouter un fond flou au menu de navigation de ma page html, sans flouter le texte écrit dessus, juste ce qu’il y a derrière.

J’ai cherché de partout sur internet, mais tout les tutos expliquent comment flouter une image, une div box, etc., mais pas une partie de la page.

Voici une exemple de ce que je cherche:

Y a il un moyen de faire cela?

Merci de votre aide

Bonjour,

techniquement ce n'est pas possible css n'a aucune regle qui le fait mais en etant un peu joueur on peut.

Il vous faudra aplliquer la propriété

filter: blur(10px) par exemple qui creeras cet effet de flou

soit vous l'appliquer directement sur une div soit vous créez une fiv que vous mettrez en position fixed en definissant son width et son height et vous lui appliquer cette propriété ainsi vous pourrez fixer cette div sur un endroit de la page ce qui donne ce que voys chercher a faire

-
Edité par zvheer 8 janvier 2022 à 18:04:04

Merci, mais j’ai trouvé une autre façon

Pour ceux que ça intéresse, voici le code

element {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
}

La première ligne définit la couleur (le dernier attribut de rgba définit l’opacité)

Et la 2ème ligne fait l’effet de flou

Regardez la compatibilite de backdrop-filter si ca vous convient toujours n’oubliez pas de mettre le sujet comme resolu

Bonne soirée 

-
Edité par zvheer 8 janvier 2022 à 23:16:38

-
Edité par Domi65 9 janvier 2022 à 14:31:36