CSS contrast() functie
- Vorige pagina CSS conic-gradient() functie
- Volgende pagina CSS cos() functie
- Terug naar de vorige laag CSS Function Reference Manual
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%); }
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; }
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
- Vorige pagina CSS conic-gradient() functie
- Volgende pagina CSS cos() functie
- Terug naar de vorige laag CSS Function Reference Manual