Las propiedades de fondo CSS se utilizan para agregar efectos de fondo. para elementos.
En estos capítulos, aprenderá sobre las siguientes propiedades de fondo de CSS:
style="color:crimson">color-de fondo
style="color:crimson">imagen de fondo
style="color:crimson">repetición de fondo
style="color:crimson">archivo adjunto de fondo
style="color:crimson">posición-de-fondo
style="color:crimson">fondo (propiedad abreviada)
La propiedad color de fondo especifica el color de fondo de un elemento.
El color de fondo de una página se establece así:
body {
background-color: lightblue;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has a light blue background color!</p>
</body>
</html>
Con CSS, un color suele especificarse mediante:
un nombre de color válido, como "rojo"
un valor HEX, como "#ff0000"
un valor RGB, como "rgb(255,0,0)"
Mire los valores de color CSS para obtener una descripción completa. lista de posibles valores de color.
Puede establecer el color de fondo para cualquier elemento HTML:
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;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
</html>
La propiedad opacidad especifica la opacidad/transparencia de un elemento. Puede tomar un valor entre 0,0 y 1,0. Cuanto menor sea el valor, más transparente:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
div {
background-color: green;
opacity: 0.3;
}Pruébelo usted mismo →
<!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>
<h1>Transparent Boxes</h1>
<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p>
<div class="first">
<h1>opacity 0.1</h1>
</div>
<div class="second">
<h1>opacity 0.3</h1>
</div>
<div class="third">
<h1>opacity 0.6</h1>
</div>
<div>
<h1>opacity 1 (default)</h1>
</div>
</body>
</html>
Nota: Cuando se utiliza la propiedad opacidad para agregar transparencia al fondo de un elemento, todos sus elementos secundarios hereda la misma transparencia. Esto puede hacer que el texto dentro de un elemento totalmente transparente sea difícil de leer.
Si no desea aplicar opacidad a elementos secundarios, como en nuestro ejemplo anterior, utilice valores de color RGBA. El siguiente ejemplo establece la opacidad para el color de fondo y no para el texto:
100% opacity
60% opacity
30% opacity
10% opacity
En nuestro capítulo sobre colores CSS aprendió que puede usar RGB como valor de color. Además de RGB, puede utilizar un valor de color RGB con un canal alfa (RGBA), que especifica la opacidad de un color.
Un valor de color RGBA se especifica con: rgba(rojo, verde, azul, alfa). El El parámetro alfa es un número entre 0,0 (completamente transparente) y 1,0 (completamente opaco).
Consejo: Aprenderá más sobre los colores RGBA en nuestro capítulo Colores CSS.
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}Pruébelo usted mismo →
<!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>Transparent Boxes 2</h1>
<p>Result with opacity:</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>Result with 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>
<p>Notice how the text gets transparent as well as the background color when using the opacity property.</p>
</body>
</html>
Establece el color de fondo de un elemento.