Función opacity
La función opacity permite
modificar la transparencia de la imagen de fondo.
El valor 100% o 1 mantiene
la transparencia original de la imagen.
El valor 0 indica
que la imagen se volverá completamente transparente.
Cualquier número ubicado en
este rango establece una transparencia parcial del fondo.
No se puede establecer un valor negativo.
Por defecto, el valor es 1.
Sintaxis
selector {
filter: opacity(número);
}
Ejemplo
Establezcamos la transparencia de nuestra imagen en
50%:
<div id="elem"></div>
#elem {
filter: opacity(50%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Ejemplo
Y ahora establezcamos la transparencia en
100%:
<div id="elem"></div>
#elem {
filter: opacity(100%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Ejemplo
Y ahora establezcamos en la
función opacity un valor
igual a 0:
<div id="elem"></div>
#elem {
filter: opacity(0);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Véase también
-
función
blur,
que desenfoca el fondo -
función
brightness,
que establece el brillo del fondo -
función
contrast,
que establece el contraste del fondo -
función
drop-shadow,
que establece una sombra para el fondo -
función
hue-rotate,
que establece la tonalidad del fondo -
función
invert,
que invierte los colores del fondo -
función
sepia,
que convierte el fondo a sepia -
propiedad
background,
que es una propiedad abreviada para el fondo -
propiedad
background-image,
mediante la cual se puede establecer una imagen de fondo para un bloque