El CSS3 nos trae cosas muy buenas. Entre ellas está la posibilidad de poder controlar la transparencia u opacidad (como lo queramos llamar) del color de fondo de un elemento de la página. Esto nos evita el tener que colocar un fondo transparente mediante una imagen png, con lo cual reducimos el peso de la página a la hora de cargarla. Además lo soportan todos los navegadores modernos.
Siguiendo con la página Las Edades de la Tierra, en ella podéis ver que el fondo de varios elementos es negro con un grado de transparencia. La forma de conseguirlo es sencilla: con la instrucción rgba (x, x, x, z.z), donde la x es un número, de 0 a 255 (tres 0 negro, tres 255 blanco), que nos dará el color y la z es un decimal (entre 0 y 1) que nos dará la transparencia (0 totalmente transparente, 1 sin transparencia). Por ejemplo: rgba (0,0,0,0.5) sería el color negro con media opacidad.
El código CSS3 sería el siguiente:
background-color: rgba(0, 0, 0, 0.5);
O, también:
background: url(images/volcan.png) no-repeat fixed 350px 680px rgba(0, 0, 0, 0.5);
En el segundo caso establecemos antes una imagen de fondo, que no se repite, que está fija en una posición determinada y por último el color de fondo con la opacidad deseada. La única difucultad podría estar en conseguir el color en este formato, pero, al igual que existen programas para conseguir el código del color en hexadecimal, también los hay que te dan el código en formato rgba, la mayoría de ellos en ambos formatos.
Sencillo y muy útil.
Siguiendo con la página Las Edades de la Tierra, en ella podéis ver que el fondo de varios elementos es negro con un grado de transparencia. La forma de conseguirlo es sencilla: con la instrucción rgba (x, x, x, z.z), donde la x es un número, de 0 a 255 (tres 0 negro, tres 255 blanco), que nos dará el color y la z es un decimal (entre 0 y 1) que nos dará la transparencia (0 totalmente transparente, 1 sin transparencia). Por ejemplo: rgba (0,0,0,0.5) sería el color negro con media opacidad.
El código CSS3 sería el siguiente:
background-color: rgba(0, 0, 0, 0.5);
O, también:
background: url(images/volcan.png) no-repeat fixed 350px 680px rgba(0, 0, 0, 0.5);
En el segundo caso establecemos antes una imagen de fondo, que no se repite, que está fija en una posición determinada y por último el color de fondo con la opacidad deseada. La única difucultad podría estar en conseguir el color en este formato, pero, al igual que existen programas para conseguir el código del color en hexadecimal, también los hay que te dan el código en formato rgba, la mayoría de ellos en ambos formatos.
Sencillo y muy útil.
Comentarios
Publicar un comentario