<image>

Resumen

El tipo de dato CSS <image> representa una imagen 2D. Hay dos tipos de imágenes en CSS: imágenes planas estáticas, generalmente referenciadas usando una URL, e imágenes dinámicamente generadas, como degradados o representaciones de partes del árbol.

CSS puede manejar diferentes tipos de imágenes:

  • imágenes con dimensiones intrínsecas, es decir, su tamaño natural, como una imagen jpeg que tiene dimensiones fijas.
  • imágenes con varias dimensiones intrínsecas, que coexisten en distintas versiones dentro de un archivo, com algunos formatos .ico. En ese caso, la dimensión intrínseca será la de la imagen con área más grande, y con la proporción más próxima al tamaño del contenedor.
  • imágenes sin dimensiones intrínsecas, pero con una relación de aspecto intrínseca, entre su anchura y altura, como algunas imágenes vectorizadas, en formato SVG, por ejemplo.
  • imágenes sin dimensiones intrínsecas, ni relación de aspecto intrínseca, como un degradado CSS, por ejemplo.

CSS determina el tamaño concreto del objeto usando estas dimensiones intrínsecas, el tamaño específico en propiedades CSS como width, heightbackground-size, y el tamaño predeterminado del objeto definido por el tipo de propiedad con el que se usa la imagen:

Tipo de objeto Tamaño de objeto predeterminado
background-image El tamaño del área de posicionamiento de fondo de la imagen
list-style-image El tamaño de un caracter de 1em
border-image El tamaño del área de imagen de borde de un elemento
cursor Un tamaño definido por el navegador que coincida con el tamaño común de un cursor en el sistema en uso
Contenido reemplazado
como cuando se combina la propiedad CSS content
con los pseudo-elementos CSS ::after y ::before
Un rectángulo de 300px × 150px

El tamaño concreto del objeto es calculado usando los siguientes algoritmos:

  • Si el tamaño específico define tanto anchura como altura, estos valores son usados como el tamaño concreto del objeto.
  • Si el tamaño específico define solo anchura o solo altura, el valor faltante es determinado usando la proporción intrínseca (si la hay), las dimensiones intrínsecas (si el valor especificado coincide), o usando el tamaño predeterminado del objeto para ese valor faltante.
  • Si el valor especificado no define anchura ni altura, el tamaño concreto del objeto será calculado de modo que coincida con la relación de aspecto intrínseca de las imágenes, pero sin exceder el tamaño predeterminado en cualquiera de sus dimensiones. Si la imagen no tiene relación de aspecto intrínseca, se usará la del objeto al que se está aplicando; si el objeto no tiene ninguna, la anchura o altura faltante se tomará del tamaño predeterminado del objeto.

Las imágenes pueden ser usadas en numerosas propiedades CSS, como background-image, border-image, content, list-style-imagecursor.

Nota: No todos los navegadores soportan algun tipo de imagen o alguna propiedad. Vea la sección de compatibilidad de navegadores para una lista detallada.

Sintáxis

La representación de un tipo de dato CSS <image> puede ser una de las siguientes:

  • Una imagen denotada por un tipo de dato <uri> y la función url();
  • Un degradado CSS (<gradient>);
  • Una parte de la página, definida por la función element().

Ejemplos

Estos son valores válidos para imágenes:

url(test.jpg)                          /* La función url(), mientras test.jpg sea una imagen */
linear-gradient(to bottom, blue, red)  /* Un degradado (<gradient>) */
element(#colonne3)                     /* Una párte de la página, usando la función element(),
                                          mientras colonne3 sea un identificador CSS existente en la página. */

Estos son valores incorrectos para imágenes:

cervin.jpg                             /* Un archivo de imagen debe ser definido usando la función url(). */
url(report.pdf)                        /* El archivo indicado en la función url() debe ser una imagen. */
element(#fakeid)                       /* Si 'fakeid' no es un identificador CSS existente en la página. */

Especificaciones

Especificación Estatus Comentarios
CSS Image Values and Replaced Content Module Level 3
The definition of '<image>' in that specification.
Candidate Recommendation

Antes de CSS3, no había un tipo de dato <image> definido. Las imágenes solo podían ser definidas usando notaciones funcionales url().

Compatibilidad de navegadores

Característica Firefox (Gecko) Chrome Internet Explorer Opera Safari
<uri> (Yes) (Yes) (Yes) (Yes) (Yes)
<gradient> (Yes)
limited to background-image & background-moz
(Yes)-webkit IE 10-ms (Yes)-o (Yes)-webkit
element() 4.0 (2.0) limited to background-image & background-moz ? ? ? ?
Característica Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
<uri> (Yes) (Yes) (Yes) (Yes) (Yes)
<gradient> (Yes)
limited to background-image & background-moz
? ? ? ?
element() 4.0 (2.0) limited to background-image & background-moz ? ? ? ?

Véase también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: israel-munoz
 Última actualización por: israel-munoz,