background-image transparente (transparente de verdad)

[jacohawk]

Buenas!

Tengo una imagen png de fondo de cabecera fija (cuando bajo el scroll sigue viéndose) pero esta imagen tiene una sombra... bueno, os lo dejo en esta foto para que lo veáis -->



La línea roja representa el alto de la imagen, por lo tanto, si hago click por encima de la línea roja, en un botón o en un link, realmente le estaría dando click a la imagen de fondo, aunque ésta sea transparente.

¿Habría alguna forma de hacer la imagen de fondo realmente transparente?, que los clicks no le hagan efecto a la imagen, sino a lo que esté debajo de ésta.

Muchas gracias!

[maycolalvarez]

si la imagen está agregada como fondo, no debería interferir con los links que ésten en dicha capa, si quieres muestra el fragmento HTML/CSS de ésa sección para descartar.

[jacohawk]

La imagen está superpuesta por encima de todo, ya que es la sombra de una barra fija (toolbar, como la de facebook), entonces cuando hago scroll las cosas van pasando por debajo de la barra, ¿se entiende?

Aquí se ve mejor:


No podría hacer click en "Recent Works".

[pzin]

Lo suyo sería, com dice maycolalvarez, que la imagen fuese una imagen de fondo.

Podrías ponerla como fondo fijo en el elemento padre del contenido. Algo así:

Código CSS:

div#contenedor {
  background: url(sombra.png) no-repat fixed center top;
}
 

[jacohawk]

Entonces los botones, links y demás pasarían por encima de la sombra, lo cual dejaría de hacer que parezca una sombra xD

¿No hay ninguna otra solución?

[pzin]

Iniciado por jacohawk

Entonces los botones, links y demás pasarían por encima de la sombra, lo cual dejaría de hacer que parezca una sombra xD

Hostia si. Claro.

Yo nunca me había planteado algo así, y a bote pronto sólo puedo decir que no es posible, ya que quieres que esté por encima pero a la vez por debajo.

[jacohawk]

Yo nunca me había planteado algo así, y a bote pronto sólo puedo decir que no es posible, ya que quieres que esté por encima pero a la vez por debajo.

Más que eso lo que quiero sería que esté encima pero que los clicks no le hagan caso y pasen al de debajo.
Recuerdo que lo tengo hecho en Visual Basic, claramente no podemos comparar Visual Basic con HTML, pero bueno, tal vez con ayuda de JavaScript, o algo... no sé :/

[maycolalvarez]

en efecto, dudo que sea posible, porque incluso colocándole un zIndex inferior, quedaría debajo de todo.

la opción más viable pudiera ser un SVG en el lugar preciso, pero no sé si el área del mismo afecte igual que el de la imagen, otra es usar flash lo cual tampoco garantiza nada. (tanto svg como flash dependen de que el navegador lo soporte o lo tenga instalado)

[Rafael]

En este caso no le veo problema ya que el botón es gris. Si fuera un rojo intenso entonces no se podría.

Mi soución es:
1) Deja la sombra de fondo.
2) Haz los botones negros al 100% y vuélvelos transparentes, digamos al 40%...

Tu botón es gris y la sombra se alcanza a ver. Gracias, querido público conocedor...

No se puede con un rojo, ya que se volvería rosa.

[Rafael]

Otra solución, un poco cutre.

Tienes tu fondo con todo... los cuadros grises, sombras y mermelada embarrada.

Arriba tienes unos botones transparentes sin fondo. Solo la zona sensible... OOoohhh.

Gracias, querido público conocedor...

[jacohawk]

xD
Bueno, gracias, a ver qué hago, cualquier otra solución es bienvenida :)