Fondos CSS - CSS Backgrounds

CSS background-color

CSS color de fondo

La background-color propiedad especifica el color de fondo de un elemento.

Ejemplo

El color de fondo de una página se establece así:

body {
  background-color: lightblue;
}

Con CSS, un color se especifica con mayor frecuencia por:

un nombre de color válido, como "rojo"
un valor HEX - como "# ff0000"
un valor RGB, como "rgb (255,0,0)"

Otros elementos

Puede establecer el color de fondo para cualquier elemento HTML:

Ejemplo

Aquí, los elementos <h1>, <p> y <div> tendrán diferentes colores de fondo:

h1 {
  background-color: green;
}
div {
  background-color: lightblue;
}
p {
  background-color: yellow;
}

Opacidad / Transparencia - Opacity / Transparency

La opacity propiedad especifica la opacidad / transparencia de un elemento. Puede tomar un valor de 0.0 - 1.0. Cuanto menor sea el valor, más transparente:

Ejemplo

div {
  background-color: green;
  opacity: 0.3;
}

Ejemplo completo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
}
div.first {
  opacity: 0.1;
}
div.second {
  opacity: 0.3;
}
div.third {
  opacity: 0.6;
}
</style>
</head>
<body>

  1. Nota: Al usar la opacity propiedad para agregar transparencia al fondo de un elemento, todos sus elementos secundarios heredan la misma transparencia. Esto puede hacer que el texto dentro de un elemento totalmente transparente sea difícil de leer.

Transparencia usando RGBA

Si no desea aplicar opacidad a elementos secundarios, como en nuestro ejemplo anterior, use valores de color RGBA. El siguiente ejemplo establece la opacidad para el color de fondo y no el texto:

Aprendió de nuestro Capítulo de colores CSS, que puede usar RGB como valor de color. Además de RGB, puede usar un valor de color RGB con un canal alfa (RGB A ), que especifica la opacidad de un color.

Un valor de color RGBA se especifica con: rgba (red, green, blue, alpha). El parámetro alfa es un número entre 0.0 (completamente transparente) y 1.0 (completamente opaco).

Ejemplo

div {
  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}

Ejemplo completo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background: rgb(0, 128, 0);
}
div.first {
  background: rgba(0, 128, 0, 0.1);
}
div.second {
  background: rgba(0, 128, 0, 0.3);
}
div.third {
  background: rgba(0, 128, 0, 0.6);
}
</style>
</head>
<body>
<h1>Caja transparente</h1>
<p>Con opacidad:</p>
<div style="opacity:0.1;">
  <h1>10% opacity</h1>
</div>
<div style="opacity:0.3;">
  <h1>30% opacity</h1>
</div>
<div style="opacity:0.6;">
  <h1>60% opacity</h1>
</div>
<div>
  <h1>opacity 1</h1>
</div>
<p>Con valores de color RGBA:</p>
<div class="first">
  <h1>10% opacity</h1>
</div>
<div class="second">
  <h1>30% opacity</h1>
</div>
<div class="third">
  <h1>60% opacity</h1>
</div>
<div>
  <h1>default</h1>
</div>
</body>
</html>

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Related post

Comentarios