Funksjonen opacity

Funksjonen opacity lar deg endre gjennomsiktigheten til bakgrunnsbildet. Verdien 100% eller 1 beholder bildets opprinnelige gjennomsiktighet. Verdien 0 betyr at bildet blir helt gjennomsiktig. Et hvilket som helst tall innenfor dette området setter delvis gjennomsiktighet for bakgrunnen. Negativ verdi kan ikke settes. Standardverdien er 1.

Syntaks

velger {
	filter: opacity(tall);
}

Eksempel

La oss sette gjennomsiktigheten på bildet vårt til 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;
}

Eksempel

Og la oss nå sette gjennomsiktigheten til 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;
}

Eksempel

Og la oss nå sette funksjonen opacity til verdien 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;
}

Se også

funksjonen blur,
som uskarpgjør bakgrunnen
funksjonen brightness,
som setter lysstyrke på bakgrunnen
funksjonen contrast,
som setter kontrast på bakgrunnen
funksjonen drop-shadow,
som setter skygge på bakgrunnen
funksjonen hue-rotate,
som setter fargetone på bakgrunnen
funksjonen invert,
som inverterer bakgrunnens farger
funksjonen sepia,
som konverterer bakgrunnen til sepia
egenskapen background,
som er en sammentrekkende egenskap for bakgrunn
egenskapen background-image,
som brukes til å sette bakgrunnsbilde på et element