14 Colores y fondos

Contenidos

Las propiedades de CSS permiten a los autores especificar el color de fondo y el aspecto del fondo de un elemento. Los fondos pueden ser colores o imágenes. Las propiedades del fondo permiten a los autores ubicar una imagen de fondo, repetirla y declarar si debe quedar fija con respecto al acceso visual o desplazada junto con el documento.

Ver la sección sobre unidades de color por la sintaxis de los valores de color válidos.

14.1 Color del primer plano: la propiedad 'color'

'color'
Valor:  <color> | inherit
Inicial:  depende de la aplicación del usuario
Se aplica a:  todos los elementos
Se hereda:  si
Porcentajes:  N/A
Medios:  visuales

Esta propiedad describe el color del primer plano del contenido de texto de un elemento. Existen distintas maneras de especificar rojo:

Ejemplo(s):

EM { color: red }              /* nombre de color predefinido */
EM { color: rgb(255,0,0) }     /* RGB rango 0-255 */

14.2 El fondo

Los autores pueden especificar el fondo de un elemento (es decir, su superficie de procesamiento) ya sea como un color o como una imagen. En términos del modelo de caja, "background" se refiere al fondo del contenido y las áreas de relleno (padding). El color y estilo del borde se ponen con las propiedades del borde. Los márgenes son siempre transparentes de modo que el fondo de la caja padre siempre se ve a través.

Las propiedades del fondo no se heredan, pero el fondo de la caja padre por defecto se verá a través debido al valor inicial 'transparent' para 'background-color'.

El fondo de una caja generada por el elemento raíz cubre todo el lienzo.

Para los documentos en HTML, sin embargo, recomendamos que los autores especifiquen el fondo del elemento BODY en vez del elemento HTML. Las aplicaciones del usuario deben observar las siguientes reglas de precedencia para llenar el fondo: si el valor de la propiedad 'background' del elemento HTML es distinto a 'transparent' entonces se lo usa, de otro modo se usa el valor de la propiedad 'background' del elemento BODY. Si el valor resultante es 'transparent', el procesamiento es indefinido.

De acuerdo con estas reglas, el lienzo subyacente del siguiente documento HTML tendrá un fondo "mármol".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Poniendo el fondo del lienzo</TITLE>
    <STYLE type="text/css">
       BODY { background: url("http://style.com/mármol.png") }
    </STYLE>
  </HEAD>
  <BODY>
    <P>Mi fondo es de mármol.
  </BODY>
</HTML>

14.2.1 Propiedades del fondo: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' y 'background'

'background-color'
Valor:  <color> | transparent | inherit
Inicial:  transparent
Se aplica a:  todos los elementos
Se hereda:  no
Porcentajes:  N/A
Medios:  visuales

Esta propiedad determina del color de fondo de un elemento, ya sea un valor de <color> o la palabra clave 'transparent', para hacer que los colores subyacentes se vean a través.

Ejemplo(s):

H1 { background-color: #F00 }
'background-image'
Valor:  <uri> | none | inherit
Inicial:  none
Se aplica a:  todos los elementos
Se hereda:  no
Porcentajes:  N/A
Medios:  visuales

Esta propiedad determina la imagen de fondo de un elemento. Cuando ponen una imagen de fondo, los autores deben también especificar un color de fondo que será usado cuando la imagen no esté disponible. Cuando la imagen está disponible, es procesada encima del color de fondo. (Así, el color es visible a través de las zonas transparentes de la imagen.)

Los valores para esta propiedad son un <uri>, para especificar la imagen, o 'none', cuando no se utiliza ninguna imagen.

Ejemplo(s):

BODY { background-image: url("mármol.gif") }
P { background-image: none }
'background-repeat'
Valor:  repeat | repeat-x | repeat-y | no-repeat | inherit
Inicial:  repeat
Se aplica a:  todos los elementos
Se hereda:  no
Porcentajes:  N/A
Medios:  visuales

Si se especifica una imagen de fondo, esta propiedad especifica si la imagen es repetida (mosaico), y de qué modo. Un mosaico completo cubre las áreas de contenido y relleno de una caja. Los valores tienen los siguientes significados:

repeat
La imagen es repetida tanto horizontal como verticalmente.
repeat-x
La imagen es repetida sólo horizontalmente.
repeat-y
La imagen es repetida sólo verticalmente.
no-repeat
La imagen no se repite: sólo una copia de la imagen es visualizada.

Ejemplo(s):

BODY { 
  background: white url("pendiente.gif");
  background-repeat: repeat-y;
  background-position: center;
}

Una imagen de fondo centrada, con copias repetidas arriba y abajo en las áreas de contenido y relleno.   [D]

Una copia de la imagen está centrada, y otras copias están colocadas por encima y por debajo de la misma para formar una banda vertical por detrás del elemento.

'background-attachment'
Valor:  scroll | fixed | inherit
Inicial:  scroll
Se aplica a:  todos los elementos
Se hereda:  no
Porcentajes:  N/A
Medios:  visuales

Si se especifica una imagen de fondo, esta propiedad especifica si es fija con respecto al acceso visual ('fixed') o se desplaza junto con el documento ('scroll').

Incluso cuando la imagen sea fija, sólo será visible cuando esté en el fondo o el área de relleno del elemento. De este modo, a menos que la imagen forme un mosaico ('background-repeat: repeat'), puede ser invisible.

Ejemplo(s):

Este ejemplo crea una banda vertical infinita que permanece "pegada" al acceso visual cuando el elemento es desplazado.

BODY { 
  background: red url("pendiente.gif");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

Las aplicaciones del usuario pueden tratar 'fixed' como 'scroll'. Sin embargo, se recomienda que interpreten 'fixed' correctamente, la menos para los elementos HTML y BODY, porque no hay un modo de que el autor proporcione una imagen exclusivamente para aquellos navegadores que soportan 'fixed'. Ver la sección sobre conformidad para más detalles.

'background-position'
Valor:  [ [<porcentaje> | <medida> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
Inicial:  0% 0%
Se aplica a:  los elementos reemplazados y a nivel de bloque
Se hereda:  no
Porcentajes:  referidos al tamaño de la propia caja
Medios:  visuales

Si se ha especificado una imagen de fondo, esta propiedad especifica su posición inicial. Los valores tienen los siguientes significados:

<porcentaje> <porcentaje>
Con un par de valores de '0% 0%', la esquina superior izquierda de la imagen es alineada con la esquina superior izquierda del límite del relleno de la caja. Un par de valores de '100% 100%' coloca la esquina inferior derecha de la imagen en la esquina inferior derecha del área del relleno. Con un par de valores de '14% 84%', el punto ubicado a un 14% del costado y a un 84% hacia abajo en la imagen será colocado en el punto ubicado a un 14% del costado y a un 84% hacia abajo en el área de relleno.
<medida> <medida>
Con un par de valores de '2cm 2cm', la esquina superior izquierda de la imagen es ubicada 2cm a la derecha y 2cm abajo de la esquina superior izquierda del área de relleno.
top left y left top
Igual '0% 0%'.
top, top center y center top
Igual a '50% 0%'.
right top y top right
Igual a '100% 0%'.
left, left center y center left
Igual a '0% 50%'.
center y center center
Igual a '50% 50%'.
right, right center y center right
Igual a '100% 50%'.
bottom left y left bottom
Igual a '0% 100%'.
bottom, bottom center y center bottom
Igual a '50% 100%'.
bottom right y right bottom
Igual a '100% 100%'.

Si solamente se da un valor de porcentaje o de medida, éste determina sólo la posición horizontal, la posición vertical será 50%. Si se dan dos valores, la posición horizontal viene primero. La combinación de valores de medida y de porcentajes está permitida (ej., '50% 2cm'). Las posiciones negativas están permitidas. Las palabras clave no pueden ser combinadas con valores de porcentaje o de medida (todas las combinaciones posibles están dadas arriba).

Ejemplo(s):

BODY { background: url("banner.jpeg") right top }    /* 100%   0% */
BODY { background: url("banner.jpeg") top center }   /*  50%   0% */
BODY { background: url("banner.jpeg") center }       /*  50%  50% */
BODY { background: url("banner.jpeg") bottom }       /*  50% 100% */

Si la imagen de fondo está fija en el acceso visual (ver la propiedad 'background-attachment'), la imagen es ubicada en relación al acceso visual en vez del área de relleno del elemento. Por ejemplo,

Ejemplo(s):

BODY { 
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
} 

En el ejemplo de arriba, la (única) imagen es ubicada en la esquina inferior derecha del acceso visual.

'background'
Valor:  [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit
Inicial:  no definido para las propiedades resumidas
Se aplica a:  todos los elementos
Se hereda:  no
Porcentajes:  permitidos en 'background-position'
Medios:  visuales

La propiedad 'background' es una propiedad resumida para fijar la propiedades individuales del fondo (es decir, 'background-color', 'background-image', 'background-repeat', 'background-attachment' y 'background-position') en un mismo lugar en la hoja de estilo.

La propiedad 'background' primero coloca a todas las propiedades individuales del fondo en sus valores iniciales, luego asigna los valores explícitamente dados en la declaración.

Ejemplo(s):

En la primer regla del ejemplo siguiente, sólo un valor para 'background-color' ha sido fijado y las otras propiedades individuales son puestas con sus valores iniciales. En la segunda regla, todas las propiedades individuales han sido especificadas.

BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }

14.3 Corrección de la gama

Para información acerca del tema de la gama, por favor consulte la Guía de gama en la especificación PNG ([PNG10]).

En el cómputo de la corrección de gama, las AU visualizadas en un CRT pueden asumir un CRT ideal e ignorar cualquier efecto de gama aparente provocado por el dithering. Esto significa que el tratamiento mínimo que necesita hacer en la plataforma actual es:

PC usando MS-Windows
ninguno
Unix usando X11
ninguno
Mac usando QuickDraw
aplicar una gama de 1.45 [ICC32] (Las aplicaciones ColorSync-savvy pueden simplemente pasar el perfil sRGB ICC a ColorSync para llevar a cabo la adecuada corrección de color)
SGI usando X
aplicar el valor de gama de /etc/config/system.glGammaVal (siendo el valor predeterminado de 1.70; las aplicaciones corriendo en Irix 6.2 o superior pueden simplemente pasar el perfil sRGB ICC al sistema de administración de color)
NeXT usando NeXTStep
aplicar una gama de 2.22

"Aplicar una gama" significa que cada uno de los tres R, G y B deben ser convertidos a R'=Rgama, G'=Ggama, B'=Bgama, antes de ser entregado al SO.

Esto puede efectuarse rápidamente construyendo una paleta de 256 elementos una vez por cada llamada al navegador, así:

for i := 0 to 255 do
  raw := i / 255.0;
  corr := pow (raw, gamma);
  table[i] := trunc (0.5 + corr * 255.0)
end

lo que entonces evita cualquier necesidad de efectuar cálculos complicados por atributo de color, mucho menos por pixel.

Copyright  ©  1998 W3C (MIT, INRIA, Keio ), All Rights Reserved.

Traducción: Carlos Benavidez