27822 sujets

CSS et mise en forme, CSS3

Bonjour je voudrais flouter uniquement l'image de mon background , mais le mieux que j'ai réussi c'est de flouter entièrement mon site sauf le fond :'( upload/1602514823-81315-probleme.jpg
Modérateur
Salut,

Pourquoi ne pas simplement flouter l'image de fond sur Photoshop ou autre et l'importer floutée ? Tu n'as pas la maitrise de l'image ?

Sinon tu peux chercher du coté de "backdrop-filter" mais j'ai pas bien vu tout les aspects
Modifié par _laurent (12 Oct 2020 - 17:15)
Modérateur
Tu pourrais détacher ton image dans un pseudo élément (before, after), le positionner en fond (absolute, fixed) et appliquer ton blur dessus Smiley smile
Modérateur
Bonjour,

Au lieu de mettre l'image comme background du body, on met l'image dans un pseudo-element de body (par exemple :before), on donne à ce pseudo-element la même taille que body, et on floute le pseudo-element uniquement.

Par exemple :
body:before
{
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image:url(fond.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	filter: blur(5px);
}

Amicalement,
Meilleure solution
Modérateur
oui mais ta réponse inclut l'exemple… j'ai gagné mais je dirais quand même 1-1 Smiley smile Smiley smile Smiley smile
Modifié par Yordi (12 Oct 2020 - 17:28)