¿Configura la opacidad de un elemento dentro de un div con la opacidad definida por CSS?

Estoy trabajando en un proyecto en el que estoy usando una imagen como fondo para un menú. He definido clases en mi hoja de estilo CSS que dictan la apariencia cuando los elementos son o no "seleccionados", lo que significa que el usuario no está en la página a la que está vinculado cada artículo.¿Configura la opacidad de un elemento dentro de un div con la opacidad definida por CSS?

Lo tengo estructurado con un div en la parte superior de la imagen con los estilos aplicados para que tenga un fondo blanco semitransparente, por lo que parece que esa parte de la imagen está resaltada. Cada div semitransparente también contiene el texto que compone el enlace, con un color establecido en blanco. Me gustaría que el div mantenga la opacidad, mientras que el texto permanece en una opacidad de "1".

He intentado el método discutido en una pregunta similar (CSS - Apply Opacity to Element but NOT To Text Within The Element) pero el método no parece funcionar para mí.

He publicado el fragmento de código para el enlace en JSFiddle en http://jsfiddle.net/Cwca22/uG5y8/ si desea echarle un vistazo.

Gracias de antemano por toda la ayuda.

Fuente

2011-12-22 Cody Capella

Gracias por todas las respuestas a mi problema Kolink, Nacho, techfoobar y jblasco. Todo está bien ahora, así que gracias de nuevo. ; ^) –

Si usted está buscando una solución CSS puro, y están dispuestos a cambiar su margen de beneficio un poco, echar un vistazo a este ejemplo:

http://jsfiddle.net/jJ4MZ/3/

Se trata cada "enlace" como una combinación de elementos de fondo y texto separados, y luego los posiciona uno encima del otro, de modo que solo el fondo div use transparencias.

Fuente

2011-12-22 20:00:22 justis

¿está bien si uso su código en un proyecto comercial? Lo he modificado un poco según sea necesario, pero solo quería asegurarme de que estuviera listo para usarlo de antemano. –

¡No hay problema, me alegro de haber ayudado! – justis

Muy bien, increíble, ¡muchas gracias! –

¡Viejo problema sin soluciones estándar todavía! Esto es algo que se sabe que es imposible con el CSS actual. La única solución que conozco es usar JS. Usando JS, puedes atrapar el mousemove del H # afectado y crear/posicionar un elemento. Este nuevo elemento 'sobre' no debe ser un elemento secundario del DIV con opacidad 0.2.

Fuente

2011-12-22 19:12:55 techfoobar

Ok, podría tener que intentar eso, gracias. ¡Me sorprende que aún no haya definido nada para resolver este tipo de problemas! –

Sí, en serio. Creo que este problema ha estado presente desde el momento en que se diseñó CSS2 o algo así. ¡Cero navegadores cruzados estándar para alcanzar esta fecha! – techfoobar

Si le entiendo correctamente, quiere que el color de fondo del div sea parcialmente transparente para mostrar la imagen, pero mantenga el texto opaco? Eso es simple: 3

<div style="background-color: rgba(255,255,255,0.5);">Text</div>

Si desea proporcionar soporte para los navegadores que no permiten este formato, entonces usted necesita:

<div style="background: #ffffff; background: rgba(255,255,255,0.5);">Text</div>

Fuente

2011-12-22 19:20:54

Una vez escribí un jsFiddle para un problema como este. Aquí está http://jsfiddle.net/A53Py/5/

Crea un elemento del mismo nivel que se coloca absolutamente detrás de los elementos sin opacidad. No es necesario decir que es cross browser.

creo que sirve

Fuente

2011-12-22 19:32:12

¿Configura la opacidad de un elemento dentro de un div con la opacidad definida por CSS?

Respuesta

Cuestiones relacionadas