CSS contrast() functie

Definitie en gebruik

CSS contrast() Filterfuncties worden gebruikt om de contrastverhouding van een element aan te passen.

  • 0% maakt de afbeelding volledig grijs
  • 100% (of 1) is de standaardwaarde en geeft het oorspronkelijke beeld aan
  • Waarden boven de 100% vergroten de contrastverhouding
  • Waarden onder de 100% verlagen de contrastverhouding

Voorbeeld

Voorbeeld 1

Verhoog en verlaag de contrastverhouding van de afbeelding:

#img1 {
  filter: contrast(150%);
}
#img2 {
  filter: contrast(50%);
}

Probeer het zelf uit

Voorbeeld 2

verander contrast() en backdrop-filter Gebruik van combinatie van eigenschappen:

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

Probeer het zelf uit

CSS syntaxis

contrast(amount)
Waarde Beschrijving
amount

Optioneel. Specificeer de contrastwaarde, die een getal of percentage kan zijn.

0% maakt het element volledig grijs.

100% (of 1) is de standaardwaarde en geeft het oorspronkelijke beeld (zonder effect) aan.

Waarden boven de 100% vergroten de contrastverhouding, terwijl waarden onder de 100% de contrastverhouding verlagen.

Technische details

Versie: CSS Filter Effects Module Level 1

Browserondersteuning

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

Chrome Edge Firefox Safari Opera
18 12 35 6 15

gerelateerde pagina

Referentie:CSS filter eigenschap

Referentie:CSS blur() functie

Referentie:CSS brightness() functie

Referentie:CSS drop-shadow() functie

Referentie:CSS grayscale() functie

Referentie:CSS hue-rotate() functie

Referentie:CSS invert() functie

Referentie:CSS opacity() functie

Referentie:CSS saturate() functie

Referentie:CSS sepia() functie