Propiedades de los colores y fondos
Son las propiedades que permiten fijar el color del primer plano y fondo de un elemento.
Las propiedades que podemos utilizar son las siguientes:
- color
-
Especificamos el color del primer plano del contenido del texto. Se hereda.
Nombre Color | Valor HEX | Rgb (R%,g%,B%) | Rgb(R, G,B)
EM {color: red}
En el anterior ejemplo cualquier texto enfatizado de la página aparecera en rojo.
- background-color
-
Especifica el color del fondo del elemento, que puede ser un color o la palabra reservada transparent (el fondo del elemento padre se ve).
En general, las propiedades del fondo no se heredan, pero al ser su valor inicial transparent, el fondo del elemento padre se ve en los hijos.
Esta propiedad no se hereda.
transparent | Nombre Color | Valor HEX | Rgb (R%,g%,B%) | Rgb(R, G,B)
H1 {background-color: #0000FF}
En el anterior ejemplo todos los encabezados de nivel 1 aparaceran con un fondo azul.
- background-image
-
Designa una imagen para rellenar el fondo del elemento por medio de una URL o la palabra reservada none para indicar que no se utilizara ninguna imagen.
Puede fijarse también un color que se colocará debajo de la imagen, y que asomará si la imagen no está disponible o, si lo está, detrás de sus zonas transparentes.
Esta propiedad no se hereda.
none | url(dirección)
H1 {background-image: white url("fondo.gif")}
En el ejemplo anterior cualquier encabezado de nivel 1 tendra como fondo la imagen "fondo.gif" y si esa imagen no esta disponible el fondo aparecera en color blanco.
- background-repeat
-
Establece si la imagen de fondo (establecida con background-image) se repetirá horizontal y verticalmente para rellenar todo el fondo del elemento (repeat), sólo horizontalmente (repeat-x), sólo verticalmente (repeat-y), o no se repetirá (no-repeat). No se hereda.
repeat | repeat-x | repeat-y | no-repeat
H1 {background-image: white url("fondo.gif")}
En este ejemplo al no especificarse la propiedad background-repeat por defecto se toma el valor repeat por lo que la imagen "fondo.gif" se repetira tanto horizontal como verticalmente tantas veces como sea necesario hasta ocupar toda la zona determinada por el encabezado.
- background-attachment
-
Establece si la imagen debe desplazarse (scroll) o permanecer fija con respecto a la ventana (fixed) cuando el usuario hace scroll. En cualquier caso sólo asoma en el área de contenido y relleno del elemento). No se hereda.
scroll | fixed
- background-position
-
Fija la posición de la imagen en el área de relleno del elemento por medio de:
Coordenadas, expresadas como longitud (distancia hasta la esquina superior izquierda del límite de relleno) o porcentaje sobre el tamaño de la caja (el punto n% de la imagen se sitúa en el punto n% del area de relleno), de manera que "0% 0%" indica un ajuste a la esquina superior izquierda, "100% 100%" a la inferior derecha y "50% 50%" centrada. Si se expresa una sola se entiende como "x" dándose a "y" el valor 50%.
Palabras reservadas, poniendo una o dos en cualquier orden. Si falta una se le da el valor "center" , de manera que por ejemplo "left" es equivalente a "center left".
Esta propiedad no se hereda.
XX unidad | % | top | center | bottom | left | right (el valor por defecto es la esquina superior izquierda "0% 0%")
P.nota {background-image: white url("fondo.gif");
background-repeat : repeat-y;
background-position: top center;}
background
Esta propiedad en sí representa un metodo abreviado para especificar todos los valores en un solo marcador.
transparent | color | url | repeat | scroll | position
Sobre la utilización del color
El color puede ser especificado mediante nombre o mediante especificación RGB.
Los nombres son los pertenecientes a la paleta VGA de Windows: aqua, black, blue, fucshia, gray, green, lime, marron, navy, olive, purple, red, silver, teal, white, y yellow.
La especificación RGB se puede efectuar de tres formas. La primera es mediante tres números hexadecimales, donde el primero corresponde a la cantidad de rojo, el segundo a la cantidad de verde y el tercero a la cantidad de azul.
Por ejemplo.
#FF0000 - Sera el color rojo
#00FF00 - Sera el color verde
#0000FF - Sera el color azul
y con la combinación de estos podemos conseguir los colores que queramos.
#FFFF00 - Amarillo
El mismo color puede ser especificado mediante la funcion rgb() indicando el código de color o el porcentaje:
rgb(0,255,0) --color verde
rgb(0%,100%,0) --color verde
Ejemplos
He creado una página con frases célebres sobre el dinero, en la que puedes ver ejemplos de como utilizar estas propiedades.
Tutoriales
