Conjunto de opacidad al menú, pero mantener opaca texto en CSS

Question

¿Cómo puedo crear un menú que sólo su fondo es transparente? El texto debe mantener opaco (la opacidad: 1)

Si fijo

li:hover {
    opacity: 0.5
}

El elemento de la lista entera se vuelve transparente. ¿Cómo puedo solucionar esto?

Answer 1

Hay un nuevo valor en CSS3 llamada "RGBA" que le permite utilizar un color transparente como color de fondo. Por ejemplo:

li:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

Estoy bastante seguro de que debería funcionar, aunque acabo de escribir el código en el lugar por lo que no puede. Esto, sin embargo, dar a su menú un tinte blanco-ish a ella. Si quieres leer más sobre RGBA, sin embargo, ir aquí: http: // CSS-trucos. com / RGBA-navegador-soporte /

Answer 2

Usted tendrá que utilizar una imagen PNG transparente, o un href="http://www.css3.info/preview/rgba/" rel="nofollow noreferrer"> rgba valor de color , para el fondo de la <li>, por ejemplo:

li:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

O:

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

No creo, eso es posible, probar este ejemplo: http://jsfiddle.net/578SV/

Answer 4

No se puede. El nivel de transparencia se dictó a todos los elementos secundarios.

Sus opciones:

• Place otro elemento en la parte superior de la li, posiblemente usando position: absolute, que tiene un valor de opacidad normales

• Usar un archivo PNG con transparencia alfa para crear el efecto de opacidad (Se necesita soluciones para trabajar en IE6)

• El uso de la nueva propiedad de color rgba como se muestra por @hatkirby, si se puede vivir con el apoyo del navegador incompleta