-
Résolu Barre d'outils transparente
Vendredi 13 Janvier 2017 à 11:22 Marie Le Corre
Bonjour. Je change souvent de couleur de fond pour mes sites et je me prends la tête chaque fois pour trouver dans les codes couleurs la couleur qui sera la plus approchante de celle de mon fond de site. Ca me prend parfois un temps fou et ce n'est jamais tip top.
Je voudrais donc savoir si quelqu'un a une idée pour rendre la barre ekla transparente au niveau de son fond afin qu'elle se confonde avec la couleur de mon template. Merci par avance.
Vendredi 13 Janvier 2017 à 14:51 stormalo
Bonjour Marie Le Corre,
➀ Un code qui je pense correspond à la demande :
/* barre fond transparent & texte coloré pour contraste */
#menubar {
background-color: transparent;
background-image: none;
color: white;
}➁ / Un code qui propose une autre option :
/* une barre invisible - ou presque - sauf au survol */
#menubar { opacity: 0.1; } /* hors survol */
#menubar:hover { opacity: 1; } /* au survol */opacity peut avoir une valeur entre 0 (transparence totale) et 1 (opaque)
Bon choix. .
Vendredi 13 Janvier 2017 à 17:18 Marie Le Corre
Merci beaucoup Stormalo, la première serait parfaite si je ne me retrouvais pas avec une barre blanche en haut et en bas de la barre. Voir mon site http://senvolentlesmots.eklablog.com
La seconde m'emballe moins car l'opacité est moins facile à régler..
Merci en tout cas, chaque fois que je t'ai demandé quelque chose tu as toujours répondu avec rapidité, gentillesse et réponses très claires.
Vendredi 13 Janvier 2017 à 22:25 stormalo
Chutt ! .... j'enquête dans le milieu css . . .
Pour faire disparaitre le trait blanc du bas, essaye ce code (qui donne un résultat en remontant le contenu de l'affichage):
#background {margin-top: -2px}
Sinon, au lieu de fixer la barre des menus en haut de l'écran, on peut la lier à la page. Ainsi elle disparait quand la page défile vers le haut.
#menubar {position: absolute;}Pour le moment je n'ai rien d'autre en magasin et pas de nouvelles pistes à explorer
Ce sujet est verrouillé. Vous ne pouvez donc pas poster de nouvelles réponses.