Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedad de color de fondo
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada propiedad de color de fondo Con sintaxis y ejemplos.
describir
La propiedad CSS background-color define el color de fondo de un elemento.
sintaxis
La sintaxis de la propiedad CSS de color de fondo es:
background-color: value;
parámetro o parámetro
valor
El color de fondo del elemento. Puede ser uno de los siguientes:
valor | describir |
---|---|
#RRGGBB | Representación hexadecimal del color de fondo div { color de fondo: #FF0000; } |
RGB() | Representación RGB del color de fondo div {color de fondo: rgb(255,0,0); } |
nombre del color | El nombre del color de fondo (es decir, rojo, azul, negro, blanco) div {color de fondo: rojo;} |
transparente | Indica al elemento que muestre el color de fondo de los elementos que hay detrás. El valor predeterminado de CSS background-color es transparente. div { color de fondo: transparente; } |
heredar | El elemento heredará el color de fondo de su elemento principal. div {color de fondo: heredar;} |
notas
- Los valores en la propiedad CSS background-color se pueden representar como valores hexadecimales, valores rgb o colores con nombre.
- Los valores de color de fondo se pueden expresar en valores hexadecimales como #FFFFFF, #000000 y #FF0000.
- Los valores de color de fondo se pueden representar mediante rgb, como rgb(255,255,255), rgb(0,0,0) y rgb(255,0,0).
- Los valores de color de fondo se pueden representar como colores con nombre, como blanco, negro y rojo.
- ¿Necesita convertir sus valores de color a una representación diferente? Pruebe esta herramienta en línea para convertir sus valores de color entre hexadecimal y RGB.
Compatibilidad del navegador
La propiedad CSS background-color tiene soporte básico para los siguientes navegadores:
- Aleación de cromo
- androide
- Firefox (Geco)
- Firefox móvil (Geco)
- Navegador de Internet (IE)
- es decir, móvil
- ópera
- Ópera Móvil
- Safari (WebKit)
- Safari para móvil
ejemplo
Discutiremos la propiedad de color de fondo a continuación, explorando ejemplos de cómo usarla en CSS.
uso hexadecimal
Veamos un ejemplo de color de fondo CSS en el que proporcionamos un valor hexadecimal para el color.
div { background-color: #FFFFFF; }
En este ejemplo de color de fondo CSS, proporcionamos un valor hexadecimal #FFFFFF que será
Usar RGB
También podemos proporcionar un valor de color de fondo usando rgb.
div { background-color: rgb(255,255,255); }
En este ejemplo de color de fondo CSS, rgb(0,0,0) también
Usar nombres de colores
Veamos un ejemplo de color de fondo de CSS en el que proporcionamos el valor como un color con nombre.
div { background-color: white; }
En este ejemplo de color de fondo CSS, proporcionamos el nombre “blanco”, que también
nombre del color
Aquí hay una lista de nombres de colores para elegir:
nombre del color | valor hexadecimal | Muestra de tela |
---|---|---|
Alice azul | #F0F8FF | |
blanco antiguo | #FAEBD7 | |
agua | #00FFFF | |
aguamarina | #7FFFD4 | |
cielo azul | #F0FFFF | |
marrón claro | #F5F5DC | |
sopa espesa | #FFE4C4 | |
Negro | #000000 | |
almendras blancas | #FFEBCD | |
azul | #0000FF | |
Violeta | #8A2BE2 | |
marrón | #A52A2A | |
Bollywood | #DEB887 | |
estudiante azul | #5F9EA0 | |
amarillo verde | #7FFF00 | |
chocolate | #D2691E | |
coral | #FF7F50 | |
azul aciano | #6495ED | |
seda de maiz | #FFF8DC | |
carmesí | #DC143C | |
azul | #00FFFF | |
azul oscuro | #00008B | |
verde azulado | #008B8B | |
barra de oro oscuro | #B8860B | |
gris oscuro | #A9A9A9 | |
gris oscuro | #A9A9A9 | |
verde oscuro | #006400 | |
caqui negro | #BDB76B | |
magenta profundo | #8B008B | |
verde oliva negro | #556B2F | |
naranja oscuro | #FF8C00 | |
Orquídea negra | #9932CC | |
color rojo oscuro | #8B0000 | |
salmón negro | #E9967A | |
verde mar profundo | #8FBC8F | |
azul pizarra oscuro | #483D8B | |
gris oscuro | #2F4F4F | |
pizarra gris | #2F4F4F | |
turquesa oscuro | #00CED1 | |
morado oscuro | #9400D3 | |
Rosa oscuro | #FF1493 | |
cielo azul profundo | #00BFFF | |
gris oscuro | #696969 | |
gris oscuro | #696969 | |
esquivar azul | #1E90FF | |
ladrillo refractario | #B22222 | |
flor blanca | #FFFAF0 | |
bosque verde | #228B22 | |
Fucsia | #FF00FF | |
puertasboro | #DCDCDC | |
fantasma blanco | #F8F8FF | |
oro | #FFD700 | |
vara de oro | #DAA520 | |
gris | #808080 | |
gris | #808080 | |
verde | #008000 | |
amarillo verde | #ADFF2F | |
gotas de miel | #F0FFF0 | |
Rosa brillante | #FF69B4 | |
rojo indio | #CD5C5C | |
índigo | #4B0082 | |
Marfil | #FFFFF0 | |
Caqui | #F0E68C | |
Lavanda | #E6E6FA | |
rubor lavanda | #FFF0F5 | |
césped verde | #7CFC00 | |
gasa limón | #FFFACD | |
azul claro | #ADD8E6 | |
coral poco profundo | #F08080 | |
cian claro | #E0FFFF | |
amarillo rojo dorado claro | #FAFAD2 | |
gris claro | #D3D3D3 | |
gris claro | #D3D3D3 | |
verde claro | #90EE90 |
nombre del color | valor hexadecimal | Muestra de tela |
---|---|---|
Rosa claro | #FFB6C1 | |
salmón claro | #FFA07A | |
verde mar claro | #20B2AA | |
cielo azul | #87CEFA | |
gris piedra clara | #778899 | |
lámpara gris | #778899 | |
azul acero claro | #B0C4DE | |
amarillo claro | #FFFFE0 | |
Lima | #00FF00 | |
Lima | #32CD32 | |
Lino | #FAF0E6 | |
magenta | #FF00FF | |
granate | #800000 | |
aguamarina mediana | #66CDAA | |
azul medio | #0000CD | |
orquidea media | #BA55D3 | |
morado medio | #9370D8 | |
Verde de ultramar de China | #3CB371 | |
azul pizarra medio | #7B68EE | |
verde primavera medio | #00FA9A | |
turquesa medio | #48D1CC | |
fucsia medio | #C71585 | |
azul medianoche | #191970 | |
mentas | #F5FFFA | |
Caramelo de niebla | #FFE4E1 | |
Mocasín | #FFE4B5 | |
Blancos navajos | #FFDAD | |
Armada | #000080 | |
encaje viejo | #FDF5E6 | |
Olivos | #808000 | |
aceituna | #6B8E23 | |
mandarina | #FFA500 | |
rojo naranja | #FF4500 | |
orquídea | #DA70D6 | |
barra de oro antigua | #EEE8AA | |
verde claro | #98FB98 | |
turquesa | #AFEEEE | |
lavanda | #D87093 | |
Látigo De Papaya | #FFEFD5 | |
bocanadas de durazno | #FFDAB9 | |
Perú | #CD853F | |
Rosa | #FFC0CB | |
Ciruela | #DDA0DD | |
azul pálido | #B0E0E6 | |
púrpura | #800080 | |
rojo | #FF0000 | |
Marrón rojizo | #BC8F8F | |
azul real | #4169E1 | |
silla de montar marrón | #8B4513 | |
salmón | #FA8072 | |
marrón arena | #F4A460 | |
verde mar | #2E8B57 | |
cáscara | #FFF5EE | |
ocre | #A0522D | |
plata | #C0C0C0 | |
cielo azul | #87CEEB | |
pizarra azul | #6A5ACD | |
pizarra gris | #708090 | |
pizarra gris | #708090 | |
Nieve | #FFFAFA | |
primavera verde | #00FF7F | |
azul acero | #4682B4 | |
marrón | #D2B48C | |
azul | #008080 | |
cardo | #D8BFD8 | |
tomate | #FF6347 | |
turquesa | #40E0D0 | |
Púrpura | #EE82EE | |
trigo | #F5DEB3 | |
blanco | #FFFFFF | |
humo blanco | #F5F5F5 | |
amarillo | #FFFF00 | |
amarillo verde | #9ACD32 |