Conjunto de opacidad al menú, pero mantener opaca texto en CSS
-
29-09-2019 - |
Pregunta
¿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?
Solución
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 /
Otros consejos
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 */
}
No creo, eso es posible, probar este ejemplo: http://jsfiddle.net/578SV/
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 usandoposition: 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 ??p>