Tipo de dato CSS <image>

Sintaxis

El tipo de dato <image> puede representarse con cualquiera de los siguientes:

• Una imagen denotada mediante el tipo de dato <url>
• Un tipo de dato <gradient>
• Una parte de la página web, definida mediante la función element()
• Una imagen, un fragmento de imagen o un parche de color sólido, definido mediante la función image()
• Una combinación de dos o más imágenes, definida mediante la función cross-fade().
• Una selección de imágenes elegidas según la resolución, definida mediante la función image-set().
• Generada por un paint worklet mediante la función paint().

Descripción

CSS puede trabajar con los siguientes tipos de imágenes:

• Imágenes con dimensiones intrínsecas (un tamaño natural), como un JPEG, un PNG u otro formato ráster.
• Imágenes con varias dimensiones intrínsecas, que existen en distintas versiones dentro de un mismo archivo, como algunos formatos .ico. (En este caso, las dimensiones intrínsecas serán las de la imagen de mayor área y con la relación de aspecto más parecida a la del contenedor.)
• Imágenes sin dimensiones intrínsecas, pero con una relación de aspecto intrínseca entre su ancho y su alto, como un SVG u otro formato vectorial.
• Imágenes sin dimensiones intrínsecas ni relación de aspecto intrínseca, como un degradado de CSS.

Tamaño concreto

CSS determina el tamaño concreto de un objeto utilizando (1) sus dimensiones intrínsecas; (2) su tamaño especificado, definido mediante propiedades CSS como width, height o background-size; y (3) su tamaño predeterminado, determinado por el tipo de propiedad con la que se usa la imagen:

El tamaño concreto del objeto se calcula mediante el siguiente algoritmo:

• Si el tamaño especificado define tanto el ancho como el alto, estos valores se usan como el tamaño concreto del objeto.
• Si el tamaño especificado define solo el ancho o solo el alto, el valor que falta se determina usando la relación intrínseca, si existe; las dimensiones intrínsecas, si el valor especificado coincide con ellas; o el tamaño predeterminado del objeto para ese valor faltante.
• Si el tamaño especificado no define ni el ancho ni el alto, el tamaño concreto del objeto se calcula de modo que coincida con la relación de aspecto intrínseca de la imagen, pero sin exceder el tamaño predeterminado del objeto en ninguna dimensión. Si la imagen no tiene relación de aspecto intrínseca, se usa la relación de aspecto intrínseca del objeto al que se aplica; si este objeto tampoco la tiene, el ancho o el alto que falte se toma del tamaño predeterminado del objeto.

Accesibilidad

Los navegadores no proporcionan información específica sobre las imágenes de fondo a las tecnologías de asistencia. Esto es importante sobre todo para los lectores de pantalla, ya que estos no anunciarán la presencia de la imagen y, por tanto, no transmitirán ninguna información a los usuarios. Si la imagen contiene información esencial para comprender el propósito general de la página, es preferible describirla semánticamente en el documento.

• MDN: Comprender las WCAG, explicaciones de la Pauta 1.1
• Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0

Sintaxis formal

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

Ejemplos

Imágenes válidas

url("test.jpg")               /* Una <url>, siempre que test.jpg sea una imagen real. */
linear-gradient(blue, red)  /* Un <gradient> */
element(#real-id)            /* Una parte de la página web, referenciada mediante la función element(),
                               si "real-id" es un ID existente en la página */
image(ltr "arrow.png#xywh=0,0,16,16", red)
                            /* Es una sección de 16x16 de un <url>, comenzando desde la esquina superior
                               izquierda de la imagen original, siempre que arrow.png sea una imagen
                               compatible; de lo contrario, se muestra un parche sólido de color rojo.
                               Si el idioma es rtl, la imagen se invierte horizontalmente. */
cross-fade(20% url("twenty.png"), url("eighty.png"))
                            /* Son imágenes combinadas mediante cross-fade, en la que twenty.png
                               tiene un 20% de opacidad y eighty.png un 80%. */
image-set("test.jpg' 1x, 'test-2x.jpg" 2x)
                            /* Una selección de imágenes con distintas resoluciones */

Imágenes no válidas

"no-url.jpg"           /* Un archivo de imagen debe definirse mediante la función url(). */
url("report.pdf")      /* El archivo al que hace referencia la función url() debe ser una imagen. */
element(#fakeid)     /* El ID de un elemento debe ser un ID existente en la página. */
image(z.jpg#xy=0,0)  /* El fragmento espacial debe escribirse con el formato xywh=#,#,#,# */
image-set("cat.jpg" 1x, "dog.jpg" 1x) /* cada imagen dentro de un image-set debe tener una resolución distinta */

Especificaciones

Compatibilidad con navegadores

Véase también

• <gradient>
• element()
• image()
• image-set()
• cross-fade()