CSS opacity() functie

definitie en gebruik

CSS opacity() filterfuncties worden gebruikt om een doorzichtigheidseffect toe te passen op elementen.

• 100% (of 1) heeft geen effect
• 50% (of 0.5) maakt het element 50% doorzichtig
• 0% (of 0) maakt het element volledig doorzichtig

voorbeeld

voorbeeld 1

stel verschillende transparens in voor afbeeldingen:

#img1 {
  filter: opacity(80%);
}
#img2 {
  filter: opacity(50%);
}
#img3 {
  filter: opacity(0.2);
}

probeer het zelf

voorbeeld 2

zet opacity() en backdrop-filter eigenschappen samen gebruiken:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: opacity(50%);
  backdrop-filter: opacity(50%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

probeer het zelf

CSS syntaxis

opacity(amount)

technische details

browserondersteuning

De cijfers in de tabel geven de eerste browserversie aan die deze functie volledig ondersteunt.

gerelateerde pagina's

Referentie:CSS filter eigenschap

Referentie:CSS blur() functie

Referentie:CSS brightness() functie

Referentie:CSS contrast() functie

Referentie:CSS drop-shadow() functie

Referentie:CSS grayscale() functie

Referentie:CSS hue-rotate() functie

Referentie:CSS invert() functie

Referentie:CSS saturate() functie

Referentie:CSS sepia() functie