Définir l'opacité au menu, mais garder le texte opaque en CSS

Question

Comment puis-je créer un menu qui ne son arrière-plan est transparent? Le texte doit maintenir opaque (opacité: 1)

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?

Answer 1

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, cependant, donner votre menu une teinte blanc-ish à elle. Si vous voulez en savoir plus sur RGBA, bien, allez ici: http: //-css astuces. com / RGBA navigateur support /

Answer 2

Vous devez utiliser une image PNG transparent, ou un rgba valeur de couleur , pour le fond de <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 */
}

Answer 3

Je ne pense pas, cela est possible, essayez cet exemple: http://jsfiddle.net/578SV/

Answer 4

Vous ne pouvez pas. Le niveau de transparence se rendu à tous les éléments de l'enfant.

Vos options:

• Placer un autre élément au-dessus de la li, en utilisant éventuellement position: absolute, qui a un paramètre d'opacité normale

• Utilisez un fichier PNG avec transparence alpha pour créer l'effet d'opacité (Devrez solutions de contournement au travail dans IE6)

• Utilisez la nouvelle propriété de couleur rgba comme le montre @hatkirby, si vous pouvez vivre avec le soutien du navigateur incomplet