CSS Color de fondo


Ejemplo

El background-color propiedad establece el color de fondo de un elemento utilizando un valor de color o por medio de palabras clave, tales como la transparent , inherit o initial .

  • transparente , especifica que el color de fondo debe ser transparente. Esto es por defecto

  • heredar , hereda esta propiedad de su elemento padre.

  • inicial , establece esta propiedad en su valor predeterminado.

Esto se puede aplicar a todos los elementos, y ::first-letter pseudo-elementos de ::first-letter / ::first-line .

Los colores en CSS se pueden especificar por diferentes métodos .


Nombres de colores

CSS

div {
  background-color: red;  /* red */
} 

HTML

<div>This will have a red background</div>
  • El ejemplo utilizado anteriormente es una de las varias formas en que CSS tiene que representar un solo color.

Códigos de color hexadecimales

El código hexadecimal se utiliza para indicar los componentes RGB de un color en notación hexadecimal de base 16. # ff0000, por ejemplo, es rojo brillante, donde el componente rojo del color es de 256 bits (ff) y las partes verde y azul correspondientes del color son 0 (00).

Si ambos valores en cada uno de los tres emparejamientos RGB (R, G y B) son iguales, entonces el código de color se puede acortar en tres caracteres (el primer dígito de cada emparejamiento). #ff0000 puede reducirse a #f00 , y #ffffff puede reducirse a #fff .

La notación hexadecimal no distingue entre mayúsculas y minúsculas.

body {
  background-color: #de1205; /* red */
}

.main {
  background-color: #00f; /* blue */
}

RGB / RGBa

Otra forma de declarar un color es usar RGB o RGBa.

RGB significa rojo, verde y azul, y requiere de tres valores separados entre 0 y 255, colocados entre paréntesis, que se correspondan con los valores de color decimales de rojo, verde y azul respectivamente.

RGBa le permite agregar un parámetro alfa adicional entre 0.0 y 1.0 para definir la opacidad.

header {
  background-color: rgb(0, 0, 0); /* black */
}

footer {
  background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
}

HSL / HSLa

Otra forma de declarar un color es usar HSL o HSLa y es similar a RGB y RGBa.

HSL significa tono, saturación y luminosidad, y también a menudo se llama HLS:

  • El tono es un grado en la rueda de color (de 0 a 360).
  • La saturación es un porcentaje entre 0% y 100%.
  • La ligereza es también un porcentaje entre 0% y 100%.

HSLa le permite agregar un parámetro alfa adicional entre 0.0 y 1.0 para definir la opacidad.

li a {
  background-color: hsl(120, 100%, 50%); /* green */
}

#p1 {
  background-color: hsla(120, 100%, 50%, .3); /* green with 30% opacity */
}

Interacción con imagen de fondo.

Las siguientes afirmaciones son todas equivalentes:

body {
  background: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-color: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-image: url(partiallytransparentimage.png);
  background-color: red;
}

body {
  background: red url(partiallytransparentimage.png);
}

Todos llevarán al color rojo que se muestra debajo de la imagen, donde las partes de la imagen son transparentes o la imagen no se muestra (tal vez como resultado de background-repeat del background-repeat ).

Tenga en cuenta que lo siguiente no es equivalente:

body {
  background-image: url(partiallytransparentimage.png);
  background: red;
}

Aquí, el valor del background anula su background-image .

Para obtener más información sobre la propiedad de background , consulte la taquigrafía de fondo