Die opacity-funksie

Die funksie opacity laat jou toe om die deursigtigheid van 'n agtergrondbeeld te verander. Die waarde 100% of 1 laat die beeld se oorspronklike deursigtigheid bly. Die waarde 0 beteken dat die beeld heeltemal deursigtig sal word. Enige getal tussen hierdie reeks gee die agtergrond gedeeltelike deursigtigheid. 'n Negatiewe waarde kan nie gestel word nie. By verstek is die waarde gelyk aan 1.

Sintaksis

selektor {
	filter: opacity(getal);
}

Voorbeeld

Kom ons stel die deursigtigheid van ons beeld in 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

En nou laat ons die deursigtigheid instel 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

En nou laat ons aan die funksie opacity 'n waarde gelyk aan 0 toewys:

<div id="elem"></div>

#elem {
	filter: opacity(0);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Sien ook

die funksie blur,
wat die agtergrond laat vervaag
die funksie brightness,
wat die helderheid van die agtergrond stel
die funksie contrast,
wat die kontras van die agtergrond stel
die funksie drop-shadow,
wat 'n skaduwee aan die agtergrond gee
die funksie hue-rotate,
wat die kleurtoon van die agtergrond stel
die funksie invert,
wat die kleure van die agtergrond omkeer
die funksie sepia,
wat die agtergrond omskep na sepia
die eienskap background,
wat 'n verkorte eienskap vir die agtergrond is
die eienskap background-image,
waarmee jy 'n agtergrondbeeld aan 'n blok kan gee