Color de fondo transparente en CSS
- Use RGBA para establecer el color de fondo y la transparencia en CSS
- Crear color de fondo transparente en CSS
Los componentes de fondo se pueden ver desde otro elemento superior de la página gracias al color transparente de CSS. Los atributos background-color se pueden usar para hacer colores transparentes.
En CSS, no se usa ninguna propiedad llamada background-opacity para cambiar la opacidad o la transparencia del fondo de un elemento sin afectar a otros componentes, como los tipos de letra. Si intenta lograr esto con la propiedad de opacidad de CSS, también modificará la opacidad de todos los demás componentes.
Le mostraremos cómo cambiar el color de fondo transparente en CSS con algunos ejemplos.
Use RGBA para establecer el color de fondo y la transparencia en CSS
Puede utilizar el color RGBA, que incorpora transparencia alfa como parte del valor de color introducido en CSS 3. Como se ve en el siguiente ejemplo, el color RGBA se puede utilizar para cambiar el color del fondo y su transparencia.
Ejemplo de código:
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
background-image: url("/img/DelftStack/logo.png");
}
p{
padding: 20px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font: 18px Arial, sans-serif;
}
</style>
</head>
<body>
<p>Setting background transparency without affecting the content.</p>
</body>
</html>
Crear color de fondo transparente en CSS
Para crear un color de fondo transparente, utilice el código de color CSS RGBA(). El efecto es útil para proporcionar apariencia y sensación al elemento si desea que los visitantes vean el fondo del texto para mostrar la imagen de fondo.
Ejemplo de código:
<html lang="en">
<head>
<title>CSS Make Background Color Transparent Using RGBA in CSS</title>
<style>
.main-div{
background-image: url("/img/DelftStack/logo.png");
background-attachment: scroll;
padding: 20px;
}
.transparent-bg{
background: rgba(255, 165, 0, 0.73);
padding: 20px;
color: #fff;
text-align: center;
font-size: 26px;
}
</style>
</head>
<body>
<h2>Transparent backgorund color using RGBA in CSS</h2>
<div class="main-div">
<div class="transparent-bg">
Transparent Background
</div>
</div>
</body>
</html>