Comment puis-je créer un menu qui ne son arrière-plan est transparent? Le texte doit maintenir opaque (opacité: 1)définir l'opacité au menu, mais garder le texte opaque CSS
Si je mets
li:hover {
opacity: 0.5
}
L'élément de la liste entière devient transparente. Comment puis-je résoudre ce problème?
Il y a une nouvelle valeur dans CSS3 appelée « RGBA » qui vous permet d'utiliser une couleur transparente comme une couleur d'arrière-plan. Par exemple:
li:hover {
background-color: rgba(255, 255, 255, 0.5);
}
Je suis assez sûr que devrait fonctionner, bien que je viens d'écrire le code sur place il ne peut pas. Cela donnera cependant à votre menu une touche de blanc. Si vous voulez en savoir plus sur RGBA, bien, allez ici: http://css-tricks.com/rgba-browser-support/
Vous ne pouvez pas. Le niveau de transparence est transmis à tous les éléments enfants.
Vos options:
Placez un autre élément au-dessus du li, en utilisant éventuellement position: absolute, qui a une opacité réglage normal
Utilisez un fichier PNG avec transparence alpha pour créer l'effet d'opacité (Vous aurez besoin de solutions de contournement pour travailler dans IE6)
Utilisez la nouvelle propriété de couleur rgba comme indiqué par @hatkirby, si vous pouvez vivre avec inc le soutien du navigateur omplete
Vous devrez utiliser une image PNG transparente, ou un rgba colour value, pour le fond du <li>, par exemple:
li:hover {
background-color: rgba(0, 0, 0, 0.5);
}
Ou:
li:hover {
background: url(a-nice-semi-transparent-png-image.png);
/* Supplying just the image file here will make the browser repeat the image
file vertically and horizontally, thus taking up all the space, just like a
colour would */
}
Je ne pense pas que ce soit possible, essayez cet exemple: http://jsfiddle.net/578SV/
Ceci est le plus facile solution, mais le support IE et FF2 manquant sont * big * downsides –
Pour OP: Sachez que CSS3 n'est pas encore compatible avec tous les navigateurs. Si cela ne vous dérange pas, c'est une excellente réponse. –
@Pekka Me battre pour ça. Haha –