El color del texto, la transparencia y todo lo que va detrás de un elemento.
color: El color del texto (y, por herencia, de los hijos).
opacity: La opacidad de todo el elemento, con su contenido.
background-color: El color de fondo.
background-image: Una o varias imágenes de fondo, o degradados (linear-gradient(), radial-gradient(), conic-gradient()).
El color del texto, la transparencia y todo lo que va detrás de un elemento: colores, imágenes y degradados.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. El color del texto (y, por herencia, de los hijos). También es el color por defecto de bordes y subrayados (currentColor).
Valores: nombre (red), #1d3557, rgb(), hsl(), oklch(), currentColor
Esencial. La opacidad de todo el elemento, con su contenido: de 0 (invisible) a 1 (opaco).
Valores: 0 a 1, o porcentaje
📌 Nota. Para que solo el fondo sea transparente, usa un color con transparencia: rgb(29 53 87 / 50%).
Esencial. El color de fondo.
Valores: cualquier color; transparent
Esencial. Una o varias imágenes de fondo, o degradados (linear-gradient(), radial-gradient(), conic-gradient()).
Valores: url(…), linear-gradient(…), none
Si la imagen de fondo se repite y en qué dirección.
Valores: repeat, no-repeat, repeat-x, repeat-y, space, round
Dónde se coloca la imagen de fondo.
Valores: center, top right, 50% 20%, right 1rem bottom 1rem
Esencial. El tamaño de la imagen de fondo. cover la escala hasta cubrir toda la caja (recortando lo que sobre); contain, hasta que quepa entera.
Valores: cover, contain, auto, 100% auto, 200px
Si el fondo se desplaza con la página o se queda fijo (efecto parallax sencillo).
Valores: scroll, fixed, local
Hasta dónde llega el fondo: hasta el borde, el relleno o el contenido. Con text, el fondo solo se ve a través de las letras.
Valores: border-box, padding-box, content-box, text
Desde qué caja se calcula la posición del fondo: borde, relleno o contenido.
Valores: padding-box, border-box, content-box
Cómo se mezclan las capas del fondo entre sí (imagen y color), como los modos de fusión de Photoshop.
Valores: multiply, screen, overlay, luminosity…
Esencial. Abreviada: color, imagen, posición / tamaño y repetición en una línea. Admite varias capas separadas por comas (la primera queda encima).
Valores: #fcbf49, url(a.jpg) center / cover no-repeat
El color del texto, la transparencia y todo lo que va detrás de un elemento.
Código del tema: .caja { color: #e63946; }
El color del texto, la transparencia y todo lo que va detrás de un elemento: colores, imágenes y degradados.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. El color del texto (y, por herencia, de los hijos). También es el color por defecto de bordes y subrayados (currentColor).
Valores: nombre (red), #1d3557, rgb(), hsl(), oklch(), currentColor
Esencial. La opacidad de todo el elemento, con su contenido: de 0 (invisible) a 1 (opaco).
Valores: 0 a 1, o porcentaje
📌 Nota. Para que solo el fondo sea transparente, usa un color con transparencia: rgb(29 53 87 / 50%).
Esencial. El color de fondo.
Valores: cualquier color; transparent
Esencial. Una o varias imágenes de fondo, o degradados (linear-gradient(), radial-gradient(), conic-gradient()).
Valores: url(…), linear-gradient(…), none
Si la imagen de fondo se repite y en qué dirección.
Valores: repeat, no-repeat, repeat-x, repeat-y, space, round
Dónde se coloca la imagen de fondo.
Valores: center, top right, 50% 20%, right 1rem bottom 1rem
Esencial. El tamaño de la imagen de fondo. cover la escala hasta cubrir toda la caja (recortando lo que sobre); contain, hasta que quepa entera.
Valores: cover, contain, auto, 100% auto, 200px
Si el fondo se desplaza con la página o se queda fijo (efecto parallax sencillo).
Valores: scroll, fixed, local
Hasta dónde llega el fondo: hasta el borde, el relleno o el contenido. Con text, el fondo solo se ve a través de las letras.
Valores: border-box, padding-box, content-box, text
Desde qué caja se calcula la posición del fondo: borde, relleno o contenido.
Valores: padding-box, border-box, content-box
Cómo se mezclan las capas del fondo entre sí (imagen y color), como los modos de fusión de Photoshop.
Valores: multiply, screen, overlay, luminosity…
Esencial. Abreviada: color, imagen, posición / tamaño y repetición en una línea. Admite varias capas separadas por comas (la primera queda encima).
Valores: #fcbf49, url(a.jpg) center / cover no-repeat