28112 sujets

CSS et mise en forme, CSS3

[Résolu] {CSS}effet blur sur background css

Bonjour

[i]j'ai voulu mettre un flou pour mon background de ma partie <header> j'ai essaye

le code CSS
filter: blur(5px);
      -webkit-filter: blur(5px);
      -moz-filter: blur(5px);
      -o-filter: blur(5px);
      -ms-filter: blur(5px);[/i]


mais tt la partie hedaer est devenu flou !!! moi je veux que l'effet s'applique seulement pour le background de la partie header
Bonsoir,

En effet le filtre est appliqué sur tout le contenu et sur tous les enfants.
Il y a pas mal de réponse sur stackoverflow en recherchant par exemple "css blur only background".
Le principe est de placer ton background sous ton contenu via une position absolute.

exemple : http://codepen.io/akademy/pen/FlkzB
Modifié par benj (21 Dec 2014 - 03:49)
BNS
Mrc bcq pour votre rep mais ;pour vous dire mon menu est fixe et j'ai pas mis un background pour ma partie header je vais vous montrer le code html et le CSS et mon prb c'est quoi !!
mon code Html 
 <header>
	  <a href="#" ><img id="logo" src="image/logo.png" alt="Home"></a>
	   <nav>
	     <ul>
	      <li> <a href="#">Acceuil</a></li>
	      <li> <a href="#">Journal</a></li>
	      <li> <a href="#">Contact</a></li>
	      <li> <a href="#">A propos</a></li>
	     </ul>
	  </nav>
	 </header>


le code CSS
header
{
  display:block;
 height:100px;
  width:97%;
  
  
	padding-left:3%;
    padding-top:21px;

	padding-bottom:21px;
	
	 position:fixed;
    top:0; 
	z-index: 100;


}

mais mon prb c'est quand j'essaye de deplace sur la page
j'ai ce problème
upload/57151-Capture.JPG

c'est pour ca je veux mettre un flou pour le background du header !!! Smiley langue
Mets plutôt un font transparent avec rgba.

background-color: rgba(255,255,255, .5);
Sujet clos
Aller à