<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, height o background-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-image o cursor.

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:

Ejemplos

Estos son valores válidos para imágenes:

css
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:

css
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

Specification
CSS Images Module Level 3
# image-values

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también