En este artículo vamos a ver cómo configurar la opacidad de una imagen de fondo en CSS. La opacidad se puede definir como la cualidad de carecer de transparencia. Se puede utilizar para definir la cantidad de contenido que será visible.
Enfoque: podemos usar la propiedad de opacidad en CSS que se usa para cambiar la opacidad de un elemento. El valor de la propiedad se puede establecer en un rango de 0 a 1, donde «0» es completamente transparente y «1» es opaco. Se puede usar cualquier valor decimal intermedio para establecer la opacidad en consecuencia.
Sintaxis:
opacity: value;
Ejemplo: En este ejemplo, estableceremos una imagen de fondo en <div> y usaremos la propiedad de opacidad para establecer la opacidad de esta imagen. La opacidad se establece en 0,2 para que el fondo se haga transparente y el texto en la parte superior de la imagen sea claramente visible.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to change opacity of
background image in CSS ?
</title>
<style>
#GFG {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#GFG::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
/* Specify the background image to be used */
background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20210313130410/exbg.png');
background-size: cover;
/* Specify the background image */
opacity: 0.2;
}
</style>
</head>
<body>
<div id="GFG">
<h2>Background image with opacity</h2>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por devangj9689 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA