Hover avec 2 backgrounds

bonjour
je sais pas si on peut dire ça comme ça, mais j'aimerais au passage du hover, laisser le même background-image, mais en ajoutant une couleur par dessus, histoire de faire un contraste plus combre ou plus clair ...
comment faire en css ?

Je ne saisi pas trop ce que tu souhaites faire.
Tu veux marquer la page courante ou bien tu veux peut-être rajouter un effet lors de l'activation du lien.
Dans ce dernier cas tu peux utiliser ":active".

en fait je veux faire un menu enimage réactive.
j'applique donc mes images en background, avec un style sur les liens.
Ce que j'aimerais c'est que quand on passe la souris sur la zone reactive, le background ne soit pas modifié(l'image est la même),mais que j'ajoute uniquement une couleur par dessus le background ...
je sais pas si c'est possible sans js !

Sinon j'aimerais que quand on passe la souris dessus la zone reactive, il y ait la même image,mais que liens apparaissent distincts...

simplement

a {background:url("image.png");
a:hover {background:red;}

non ?
ou eventuellement :

a {background:url("image.png");
a:hover {background-color:red;background-image:none;}

?

(ça me parait trop simple pour repondre à ta question, je ne dois avoir bien saisi...)

Seb, ta première solution ne marchera pas, car tes deux propriétés background se vont pas se cumuler (même problème que ce sujet)

Pour ne modifier que la couleur d'arrière-plan en conservant l'image, il faut utiliser ta deuxième idée qui différencie background et background-color.

quel est la difference entre backdround et background-color ?
background tout seul cumul a la fois le background-color et background-image, mais bon je vois pas ce que ça changerais ...

Justement :
- le a:hover hérite de toutes les propriétés du a, donc de l'image spécifiée par background
- mais chaque propriété spécifiée pour le a:hover remplace la propriétée héritée : comme la propriété background du a:hover ne spécifie pas d'image, celle-ci est perdue.

A l'inverse, le background-color:red du a:hover n'a pas d'influence sur l'image héritée du a, puisqu'il ne concerne que la couleur.
Modifié par Laurent Denis (23 Jul 2005 - 13:50)

Ce que tu veux faire au juste, c'est changer la teinte du background (genre incrustation de couleur rouge) du lien au passage de celui-ci ???

J'avais compris ca comme ca au debut qd tu as parlé de contraste plus sombre ??? mais je dois me tromper ??
Modifié par Vlili30 (23 Jul 2005 - 14:04)

Salut imotep

Tu peux faire un menu avec des listes :

<ul id="menu">
<li class="item"><a href="#" title="X"></a></li>
<li class="item"><a href="#" title="X"></a></li>
<li class="item"><a href="#" title="X"></a></li>
</ul>

Tu appliques l'image de background de ton souhait à chacun des éléments de liste, et tu crée une image semi-transparente pour "teinter" l'image de fond, que tu appliquera en background à l'état hover de tes liens :

li.item { 
    display: block;
    width: xx;
    list-style-type: none;
    background-image: url(...);
}

li.item a {
    display: block;
    background: none;
}

li.item a:hover {
    background: url(...); /* première image de bg "teintée" ou petite image 2x2px avec alpha en repeat */
}

Pas testé mais ça devrait marcher à peu près.

Mais le plus simple est sans doute d'utiliser la méthode que l'on retrouve dans moult menus CSS dans les tutos d'Alsacréations. Je crois que celui-ci correspond à ce que tu souhaites faire : http://css.alsacreations.com/modelesmenus/g01.htm. Une seule image de fond, pas de préload... je te laisse analyser source, feuille de style et image, tu t'y retrouvera.

++

Laurent Denis a écrit :
Justement :
- le a:hover hérite de toutes les propriétés du a, donc de l'image spécifiée par background
- mais chaque propriété spécifiée pour le a:hover remplace la propriétée héritée : comme la propriété background du a:hover ne spécifie pas d'image, celle-ci est perdue.

A l'inverse, le background-color:red du a:hover n'a pas d'influence sur l'image héritée du a, puisqu'il ne concerne que la couleur.

désolé j'ai relu 3 fois le post mais j'ai pas plus compris ...
sans passer par des images je voulais savoir si on peut appliquer une image de fond et au passage de la souris(a:hover),on applique une couleur par dessus l'image ...
j'ai essayé et en fait c'est soit l'un soit l'autre ...

perso je croit pas que ce soit poss..
mis à part en flash mais la on sort du domène..
ou alors ca doit être tordu...

Le code suivant change la couleur de fond des liens au survol, derrière l'image d'arrière plan qui, elle, ne change pas.

a {
background:yellow url("test.png") left top no-repeat;
}
a:hover {
background-color:red;
} 

Maintenant, si tu souhaites que le survol modifie la teinte de l'image d'arrière-plan, cela ne marchera pas avec ce code. La solution la plus simple consiste à utiliser une deuxième image, teintée différemment, et à changer à la fois la couleur et l'image au survol.