28172 sujets

CSS et mise en forme, CSS3

Grayscale sur image en background

bonjour à tous,
je suis face à un probleme inédit :
j'ai fait un menu en css ul et li vertical, contenant un texte, et une image en background.
Or, l'effet hover sur ce menu est un changement de couleur pour le texte, et un passage de l'image en dégradé de gris sur OFF, et couleur sur On (ou hover si vous préférez)
J'ai donc fait mon image en couleur, et je comptais appliquer l'effet grayscale (1) sur le OFF, et grayscale (0) sur le hover


img{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}


Mon gros problème, c'est que les images sont dynamiques, et qu'à chaque li correspond une image différente, c'est donc avec php que je fais l'appel 1.jpg, 2.jpg etc...

Du coup, je suis obligé de mettre mon appel de l'image en background en ligne dans le code et pas dans la css... 

<li style="background: url(\'./images/'.$enregistrement1['sid'].'_on.jpg\') no-repeat center center;"><a href="content.php?id=6&sid='.$enregistrement1['sid'].'">'.stripslashes($enregistrement1['nom']).'</a></li>

et du coup je ne sais pas comment appliquer de sélecteur d'images et de hover sur cette image en background...

auriez vous une idée ?

merci de votre aide
Salut,

tu devrais jeter un oeil du côté de Jquery, pour par exemple ajouter/enlever une classe css suivant des id de balise.
Modérateur
Bonjour bonjour,

jp.bond a écrit :
Du coup, je suis obligé de mettre mon appel de l'image en background en ligne dans le code et pas dans la css...

Yep. D’ailleurs au passage je te conseille de juste mettre : 
style="background-image: url(\'./images/'.$enregistrement1['sid'].'_on.jpg\')"
et de laisser les repeat etc dans le css. Et du coup il te manque une classe sur ton élément.

jp.bond a écrit :
et du coup je ne sais pas comment appliquer de sélecteur d'images et de hover sur cette image en background...
heuu... bah comme un sélecteur :hover classique :
li{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}
li:hover,
li:focus{
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
}


La petite demo en ligne qui va bien : http://jsfiddle.net/Undless/cdh7y1vu/

Pedrothelion a écrit :
tu devrais jeter un oeil du côté de Jquery, pour par exemple ajouter/enlever une classe css suivant des id de balise.
Quelle horreur de se trimbaler un Jquery pour un changement de class en Js... Bon je dis ça mais je l'ai fais fut un temps. Jusqu’à ce qu'on me tape fort sur les doigts.
Le javascript (langage à la base hein) fait ça très bien notamment avec l'API classList

Par contre quelle horreur++ encore de faire un changement de classe au hover en Js alors qu'on peut juste faire un :hover en css...
Modifié par _laurent (05 May 2015 - 14:50)
tu peut aussi tester le blend-mode :
https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode[/url] et

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode


ex: http://codepen.io/gc-nomade/pen/oXjpbP (transition possible aussi)

<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Clients</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>
</nav>

li {
  background: gray url(http://lorempixel.com/500/50);/* ici gray pour gris , mais autre couleur possible */
  padding: 1em;
}

li:nth-child(odd) {
  background-image: url(http://lorempixel.com/500/51)
}

ul li:hover {
  background-blend-mode: luminosity;/* on choisi le fond seulement 1couleur + 1 image, mais fonctionne avec les bg multiple aussi avec plusieurs valeurs*/
}

li:last-child {
  background:url(http://lorempixel.com/500/51), linear-gradient(to right, red, gray,purple,green,tomato,yellow);/* un gradient au lieu d'une couleur */
   background-blend-mode: luminosity;
}

Modifié par gc-nomade (06 May 2015 - 10:08)
Sujet clos
Aller à