CSS1 | Background-color

En en artículo anterior hemos visto como definir todos los parámetros del fondo en una sola línea con background, veamos las propiedades de manera independiente, en este artículo haremos un repaso a background-color. 


La propiedad background-color, establece el color de fondo de un elemento. la sintaxis es la siguiente:

background-color: value;

Las propiedades de fondo no se heredan, pero debido a que por defecto el valor inicial de background-color es transparente, los elementos que no tengan un valor de background-color mostraran el fondo de los elementos padre. 

Puede parecer que no tenga relevancia esta acotación, pero no podemos confundirnos, que podamos ver un elemento "hijo" con el fondo del elemento "padre" es simplemente por la opacidad predeterminada de su fondo y no por herencia. Si queremos que el fondo sea una propiedad heredada se utiliza la palabra clave "inherit"
la propiedad se complementa muy bien con border-radius, no hay ningún problema de la combinación de ambas, el relleno se adapta perfectamente a los bordes redondeados.

Background-color, simplifica mucho nuestro trabajo ya que puede aplicarse a diversos elementos, un párrafo, un titulo, etc

<h1> con color de fondo y border-radius

El valor del color, generalmente se define por un valor HEX ( "# FF0000"), un valor RGB  ("rgb (255,0,0)") o un nombre de color ( "red", "blue", etc).
La palabra clave "transparent" puede usarse para indicar que el fondo será transparente aunque por defecto ya lo es y la palabra clave "inherit" se utiliza para heredar el fondo del elemento padre, de todos modos debemos tener en cuenta que Internet Explorer en muchas de sus versiones no soporta esta configuración (IE8 requieres un !DOCTYPE. IE9 para soportar "inherit").Si quieres mas información sobre los colores en css, te invito que les eches un ojo a la publicación: CSS | El color en CSS y sus valores, si quieres información sobre la propiedad abreviada: CSS1 | Background - Trabajando con el fondo




Espero que les haya sido de utilidad...
Hasta la próxima!!!