- El siguiente grupo son las propiedades de color y fondo, y son las siguientes:
color
: color del textobackground-color
: color del fondobackground-image
: imagen de fondobackground-repeat
: patrón de repetición de la imagen de fondo (si se repite, y cómo se repite)background-attachment
: imagen fija o desplazablebackground-position
: posición de la imagen de fondobackground
: propiedad abreviada para las propiedades de fondo.La propiedad color
es sencilla. Todas estas reglas significan lo mismo:
color : red;
color : rgb(255,0,0);
color : rgb(100%,0,0);
color : #ff0000;
color : #f00;
- ¿Todo eso significa lo mismo?
- Sí. Como ves hay cinco maneras de especificar un color en CSS:
aqua
(celeste), black
(negro), blue
(azul), fuchsia
(fucsia), gray
(gris), green
(verde), lime
(verde lima), maroon
(marrón), navy
(azul marino), olive
(verde oliva), purple
(púrpura), red
(rojo), silver
(gris claro), teal
(verde azulado), white
(blanco) y yellow
(amarillo).#rrggbb
, en hexadecimal, cada componente de 00
a FF
. Por ejemplo #4f6ac9 = RGB(4*16+15,6*16+10,12*16+9) = RGB(79,106,201)
#rgb
en hexadecimal. Por ejemplo #369 = #336699 = RGB(51,102,153)
RGB(R,G,B)
en decimal, cada componente de 0 a 255. Por ejemplo, RGB(255,255,255)
=blanco, RGB(0,0,0)
=negro, RGB(0,0,255)
=azulRGB(R%,G%,B%)
en porcentajes. Por ejemplo, RGB(0,100%,0)
=verde- ¡Uf, es un poco lío!
- Sí, ya le irás pillando el truco. Vamos con las propiedades de fondo. El color de fondo se especifica con background-color
y es igual que antes:
background-color : valor de color
También puede tomar el valor:
background-color : transparent
o sea, ningún valor, que es el valor por defecto. Por ejemplo:
P { background-color : #ff0 }
- Veamos, eso sería #ffff00
, máximo rojo, máximo verde, mínimo azul... mmm, no sé...
- Amarillo puro.
- Ah.
- Venga, esto deberías entenderlo, léete los artículos que te recomendé en el segundo tutorial.
- Bueeeno, vaaale.
- Seguimos. background-image
permite especificar una imagen de fondo. Conviene especificar al mismo tiempo una imagen de fondo y un color de fondo, por si no se puede cargar la imagen:
body { background-image : url(ajedrez.gif) ; background-color : white }
El valor por defecto es none
, ningún fondo:
p { background-image : none }
- Muy bien.
- Con background-repeat
decimos si la imagen de fondo se repite, y cómo lo hace. Los valores que puede tomar son:
repeat
: repetir horizontal y verticalmenterepeat-x
: repetir horizontalmenterepeat-y
: repetir verticalmenteno-repeat
: no repetir- Está claro...
- Por ejemplo:
body {
background-image : url(ajedrez.gif);
background-color : white;
background-repeat : repeat
}
- Muy bonito.
- background-attachment
dice si la imagen está pegada al fondo, o si se mueve con el resto de los contenidos. En el primer caso el valor es fixed
, en el segundo caso es scroll
:
body {
background-image : url(ajedrez.gif);
background-color : white;
background-repeat : repeat;
background-attachment : fixed;
}
- Ya me lo estoy imaginando...
- Y background-position
dice la posición inicial de la imagen de fondo. Son dos valores, y hay varias maneras de especificarlos, pero es un poco difícil de explicar. Lo mejor es que lo leas en la especificación. Si no lo entiendes no te preocupes, no es normal utilizar esto.
- Muy bien, allí lo leeré.
- Vale. Por último, background
nos permite declarar todas las reglas de una tacada, así:
background : white url(ajedrez.gif) repeat fixed;
Todos los valores son opcionales y van en cualquier orden. Podrías poner:
background : red
- Genial.
- En realidad no es lo mismo background-color : red
que background : red
, pero no nos vamos a enrollar más.
- Vale, vamos al siguiente grupo.
Sitio Web mantenido por Juan R. Pozo (jrpozo arroba conclase punto net).
Última modificación: 14/10/2001 - © 2001 Juan R. Pozo y conclase.net