CSS: propiedad de color de fondo

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á

El color de fondo de la pantalla de la etiqueta es blanco.

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

El color de fondo de la etiqueta se muestra como blanco.

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

El color de fondo se establece en blanco.

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