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