Fonction opacity

La fonction opacity permet de modifier la transparence d'une image d'arrière-plan. La valeur 100% ou 1 laisse à l'image sa transparence d'origine. La valeur 0 signifie que l'image deviendra complètement transparente. Tout nombre situé dans cet intervalle définit une transparence partielle de l'arrière-plan. Une valeur négative ne peut pas être définie. Par défaut, la valeur est 1.

Syntaxe

sélecteur {
	filter: opacity(nombre);
}

Exemple

Définissons la transparence de notre image à 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;
}

Exemple

Maintenant, définissons la transparence à 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;
}

Exemple

Maintenant, donnons à la fonction opacity une valeur égale à 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;
}

Voir aussi

la fonction blur,
qui floute l'arrière-plan
la fonction brightness,
qui définit la luminosité de l'arrière-plan
la fonction contrast,
qui définit le contraste de l'arrière-plan
la fonction drop-shadow,
qui ajoute une ombre portée à l'arrière-plan
la fonction hue-rotate,
qui modifie la teinte de l'arrière-plan
la fonction invert,
qui inverse les couleurs de l'arrière-plan
la fonction sepia,
qui transforme l'arrière-plan en sépia
la propriété background,
qui est une propriété raccourcie pour l'arrière-plan
la propriété background-image,
qui permet de définir une image d'arrière-plan pour un bloc