Capa de Transparencia

[grheavy]

Hola buenas, soy nuevo por aquí en el foro, así que no sé si este tema va aquí, pero allá va:

Estoy haciendo unos formularios con DIVs, pero no consigo sacar por ninguna parte el como hacer una capa de transparencia (no sé si realmente es eso lo que busco), pero por más que busco no encuentro nada.

A lo que me refiero es a eso de que cuando en muchas páginas le das a loguearte o o registrarte, se muestran unos DIVs en fixed, puedes hacer scroll por la página, pero por la parte de atrás se ve algo opaco y no se puede ni pinchar ni seleccionar nada de lo que hay aparte de los formularios.

Y claro, no sé si es que se hace con CSS, tiene algo que ver Javascript o qué, pero me gustaría sacar una solución lo antes posible, y no tiene por que ser algo muy complejo, ya que lo que busco es algo simple.

Un ejemplo sería como lo que tiene la página de Pccomponentes como login.

Si hiciera falta podría postear mi código.

PD: De Javascript y otros lenguajes de programación en sí no tengo ni idea, pero posteando la solución en sí me puedo apañar, siempre y cuando esté comentada.

Salu2 y gracias de antemano.

[pzin]

La capa con transparencia no tiene mayor dificultad:

Código CSS:

div#identificacion {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(255,255,255,0.3);
  z-index: 1000;
}
 

Puedes usar tanto rgba() como hsla() para darle un color de fondo, el último valor indica el nivel del canal alfa, que va de 0 a 1.

Luego en ese elemento puedes meter tu formulario lo que quieras.

Para hacerlo puramente en CSS, puedes ponerle un valor para ocultar por defecto esa capa de identificación:

Código CSS:

display: none;
 

Y crear un enlace del tipo:

Código HTML:

<a href="#identificacion">Login</a>
 

Luego para mostrar ese login simplemente usas la pseudo clase :target:

Código CSS:

div#identificacion:target {
  display: block;
}
 

[buzu]

Hay que tomar en cuenta que rgba no esta disponible en todos los navegadores. Otra cosa que he notado es que dependiendo del monitor y la cantidad de opacidad que se le de a la capa, algunas vece simplemente no se ve.

Hace unos dias me sucedio que estava haciendo algo similar, y note que en uno de mis monitores el fondo simplemente no se veia. No era cuestion del navegador, sino del monitor. Esto, sin embargo, era con una cantidad muy minima de opacidad.

[grheavy]

Muchas gracias por la información pero, de hecho, no me funciona :/, o al menos de la manera que lo implemento, lo único que se transparenta es el formulario, y lo que quiero es que haya una capa de transparencia, bueno, más que transparencia es una opacidad, sobre el body, y no sobre el formulario (que es lo que me ha ocurrido).

Es decir, yo tengo una función Javascript que llama al DIV para abrirlo y cerrarlo, y al abrirlo debe salir la capa opaca y al cerrarlo quitarse.

En mi CSS lo puse así pero sólo afectaba al formulario:

#divContenedor {
position: fixed;
height: 124px;
width: 340px;
margin: 0 auto;
background-color: blue;
left: 213px;
top: 34px;
background-color: rgba(255,255,255,0.3);
z-index: 1000;
display:none;

PD: El background-color: blue; es el color que quiero que tenga mi formulario, lo que quiero que cambie cuando abra el DIV es el body.

[pzin]

grheavy si te fijas mencioné los atributos que tendrías que poner al contenedor, y además meter tu formulario dentro del contenedor y estilizarlo ahí.

Respecto al soporte de rgba/hsla, exceptuando IE8 (8-9%) está disponible para el resto: http://caniuse.com/css3-colors