From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/image/index.html | 209 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 209 insertions(+) create mode 100644 files/es/web/css/image/index.html (limited to 'files/es/web/css/image/index.html') diff --git a/files/es/web/css/image/index.html b/files/es/web/css/image/index.html new file mode 100644 index 0000000000..de998cc146 --- /dev/null +++ b/files/es/web/css/image/index.html @@ -0,0 +1,209 @@ +--- +title: +slug: Web/CSS/image +tags: + - Gráfico + - Imagen CSS + - Tipo de Dato CSS +translation_of: Web/CSS/image +--- +
{{CSSRef}}
+ +

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:

+ + + +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tipo de objetoTamaño de objeto predeterminado
{{cssxref("background-image")}}El tamaño del área de posicionamiento de fondo de la imagen
{{cssxref("list-style-image")}}El tamaño de un caracter de 1em
{{cssxref("border-image")}}El tamaño del área de imagen de borde de un elemento
{{cssxref("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 {{cssxref("content")}}
+ con los pseudo-elementos CSS {{cssxref("::after")}} y {{cssxref("::before")}}		Un rectángulo de 300px × 150px
+ +

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

+ + + +

Las imágenes pueden ser usadas en numerosas propiedades CSS, como {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} o {{cssxref("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:

+ +
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ónEstatusComentarios
{{SpecName('CSS3 Images', '#typedef-image', '<image>')}}{{Spec2('CSS3 Images')}} +

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

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
<uri>{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
<gradient>{{CompatVersionUnknown}}
+ limited to {{cssxref("background-image")}} & {{cssxref("background")}}{{property_prefix("-moz")}}		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}IE 10{{property_prefix("-ms")}}{{CompatVersionUnknown}}{{property_prefix("-o")}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
element()4.0 (2.0) limited to {{cssxref("background-image")}} & {{cssxref("background")}}{{property_prefix("-moz")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
<uri>{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
<gradient>{{CompatVersionUnknown}}
+ limited to {{cssxref("background-image")}} & {{cssxref("background")}}{{property_prefix("-moz")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
element()4.0 (2.0) limited to {{cssxref("background-image")}} & {{cssxref("background")}}{{property_prefix("-moz")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Véase también

+ + -- cgit v1.2.3-54-g00ecf