De opacity-functie

De functie opacity maakt het mogelijk om de transparantie van een achtergrondafbeelding aan te passen. Een waarde van 100% of 1 behoudt de oorspronkelijke transparantie van de afbeelding. Een waarde van 0 betekent dat de afbeelding volledig transparant wordt. Elk getal binnen dit bereik geeft een gedeeltelijke transparantie van de achtergrond. Een negatieve waarde is niet mogelijk. Standaard is de waarde 1.

Syntaxis

selector {
	filter: opacity(getal);
}

Voorbeeld

Laten we de transparantie van onze afbeelding instellen op 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;
}

Voorbeeld

Laten we nu de transparantie instellen op 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;
}

Voorbeeld

Laten we nu voor de functie opacity een waarde instellen van 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;
}

Zie ook

de functie blur,
die de achtergrond vervaagt
de functie brightness,
die de helderheid van de achtergrond instelt
de functie contrast,
die het contrast van de achtergrond instelt
de functie drop-shadow,
die een schaduw aan de achtergrond toevoegt
de functie hue-rotate,
die de kleurtoon van de achtergrond aanpast
de functie invert,
die de kleuren van de achtergrond inverteert
de functie sepia,
die de achtergrond omzet naar sepiakleuren
de eigenschap background,
een samengestelde eigenschap voor de achtergrond
de eigenschap background-image,
waarmee een achtergrondafbeelding voor een blok kan worden ingesteld