CSS filter eigenschap

Definitie en gebruik

De filter eigenschap definieert de visuele effecten van een element (meestal <img>), zoals vervaging en verzadiging.

Zie ook:

CSS handleiding:CSS afbeelding

HTML DOM referentiehandleiding:filter eigenschap

Voorbeeld

Maak alle afbeeldingen zwart-wit (100% grijs):

img {
  filter: grayscale(100%);
}

Probeer het zelf uit

Tip:Meer TIY voorbeelden zijn te vinden onderin de pagina.

CSS syntaxis

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Tip:Voor het gebruik van meerdere filters, scheide elke filter met een spatie (zie meer voorbeelden onderaan de pagina).

Technische details

Standaardwaarde: none
Inherit: Nee
Animatie maken: Ondersteuning. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS3
JavaScript syntax: object.style.filter="grayscale(100%)"

Filterfunctie

Opmerking:Gebruik een percentageverhouding (bijv. 75%) voor filters, ook wordt de waarde als decimaal (bijv. 0.75) geaccepteerd.

Filter Beschrijving
none Standaardwaarde. Specificeer geen effect.
blur(px)

Gebruik het beeld een vaagheidseffect. Grotere waarden produceren meer vaagheid.

Als een gespecificeerde waarde wordt opgegeven, wordt 0 gebruikt.
brightness(%)

Pas de helderheid van het beeld aan.

  • 0% zal het beeld volledig zwart maken.
  • De standaardwaarde is 100%, wat het oorspronkelijke beeld vertegenwoordigt.
  • Waarden boven de 100% bieden een helderder resultaat.
contrast(%)

Pas de contrast van het beeld aan.

  • 0% zal het beeld volledig zwart maken.
  • De standaardwaarde is 100%, wat het oorspronkelijke beeld vertegenwoordigt.
  • Waarden boven de 100% bieden een meer contrastrijke resultaat.
drop-shadow(h-shadow v-shadow blur spread color)

Gebruik de schaduw-effect op het beeld.

Mogelijke waarden:

  • h-shadow - vereist. Specificeer de pixelwaarde van de horizontale schaduw. Negatieve waarden zullen de schaduw aan de linkerkant van het beeld plaatsen.
  • v-shadow - vereist. Specificeer de pixelwaarde van de verticale schaduw. Negatieve waarden zullen de schaduw boven het beeld plaatsen.

blur - optioneel. Dit is de derde waarde, de eenheid moet in pixels zijn. Voeg een vaagheidseffect toe aan de schaduw. Hoe groter de waarde, hoe meer vaagheid wordt gecreëerd (de schaduw wordt groter en helderder). Negatieve waarden zijn niet toegestaan. Als er geen waarde wordt opgegeven, wordt 0 gebruikt (de rand van de schaduw is scherp).

spread - optioneel. Dit is de vierde waarde, de eenheid moet in pixels zijn. Positieve waarden zullen de schaduw uitbreiden en vergroten, negatieve waarden zullen de schaduw verkleinen. Als er geen waarde wordt opgegeven, wordt 0 gebruikt (de schaduw is van dezelfde grootte als het element).

Opmerking:Chrome, Safari en Opera, misschien ook andere browsers, ondersteunen de vierde lengte niet; als deze wordt toegevoegd, wordt deze niet weergegeven.

color - optioneel. Voeg de schaduw een kleur toe. Als er geen kleur wordt opgegeven, hangt de kleur af van de browser (meestal zwart).

Dit voorbeeld maakt een rode schaduw, horizontaal en verticaal 8px, met een 10px vaagheidseffect:

filter: drop-shadow(8px 8px 10px red);

Tip:This filter is similar to the box-shadow attribute.
grayscale(%)

Convert the image to grayscale.

  • 0% (0) is the default value, representing the original image.
  • 100% will make the image completely grayscale (used for black and white images).

Opmerking:Negative values are not allowed.
hue-rotate(deg)

Apply a hue rotation to the image. This value defines the degrees of the color wheel. The default value is 0deg, representing the original image.

Opmerking:The maximum value is 360deg.
invert(%)

Invert the samples in the image.

  • 0% (0) is the default value, representing the original image.
  • 100% will make the image completely inverted.

Opmerking:Negative values are not allowed.
opacity(%)

Set the opacity level of the image. The opacity-level describes the opacity level, where:

  • 0% is completely transparent.
  • 100% (1) is the default value, representing the original image (opaque).

Opmerking:Negative values are not allowed.

Tip:This filter is similar to the opacity attribute.
saturate(%)

Set the saturation of the image.

  • 0% (0) will make the image completely un-saturated.
  • 100% is the default and represents the original image.
  • Values over 100% provide super-saturated results.

Opmerking:Negative values are not allowed.
sepia(%)

Convert the image to sepia.

  • 0% (0) is the default value, representing the original image.
  • 100% will make the image completely sepia.

Opmerking:Negative values are not allowed.
url()

The url() function accepts the location of the XML file that specifies the SVG filter and can include an anchor point to a specific filter element. Example:

filter: url(svg-url#element-id)
initial Set this property to its default value. See initial.
inherit Inherit this property from its parent element. See inherit.

More examples

Blur example

Add a blur effect to the image:

img {
  filter: blur(5px);
}

Probeer het zelf uit

Blur example 2

Apply a blurred background image:

img.background {
  filter: blur(35px);
}

Probeer het zelf uit

Brightness example

Adjust the brightness of the image:

img {
  filter: brightness(200%);
}

Probeer het zelf uit

Contrast example

Adjust the contrast of the image:

img {
  filter: contrast(200%);
}

Probeer het zelf uit

Shadow example

To apply a shadow effect to the image:

img {
  filter: drop-shadow(8px 8px 10px gray);
}

Probeer het zelf uit

Zwart-wit voorbeeld

Maak het beeld zwarz-wit:

img {
  filter: grayscale(50%);
}

Probeer het zelf uit

Kleurtoonrotatie voorbeeld

Toepassen van een kleurtoonrotatie op het beeld:

img {
  filter: hue-rotate(90deg);
}

Probeer het zelf uit

Omgekeerde voorbeeld

Keer de voorbeelden in het beeld om:

img {
  filter: invert(100%);
}

Probeer het zelf uit

Doorzichtigheidsvoorbeeld

Stel het doorzichtigheidsniveau van het beeld in:

img {
  filter: opacity(30%);
}

Probeer het zelf uit

Verzadiging voorbeeld

Pas de verzadiging van het beeld aan:

img {
  filter: saturate(800%);
}

Probeer het zelf uit

Bruine voorbeeld

Maak het beeld bruin:

img {
  filter: sepia(100%);
}

Probeer het zelf uit

Gebruik meervoudige filters

Gebruik meerdere filters door ze te scheiden met een spatie. Let op de volgorde (bijvoorbeeld, gebruik grayscale() na sepia() om een volledig grijs beeld te krijgen):

img {
  filter: contrast(200%) brightness(150%);
}

Probeer het zelf uit

Alle filters

Demonstreer alle filterfuncties:

.blur {
  filter: blur(4px);
}
.brightness {
  filter: brightness(0.30);
}
.contrast {
  filter: contrast(180%);
}
.grayscale {
  filter: grayscale(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
.invert {
  filter: invert(100%);
}
.opacity {
  filter: opacity(50%);
}
.saturate {
  filter: saturate(7);
}
.sepia {
  filter: sepia(100%);
}
.shadow {
  filter: drop-shadow(8px 8px 10px green);
}

Probeer het zelf uit

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.

Cijfers met -webkit- voorafgaand betekenen de eerste versie die het voorvoegsel gebruikt.

Chrome IE / Edge Firefox Safari Opera
53.0
18.0 -webkit-		 13.0 35.0 9.1
6.0 -webkit-		 40.0
15.0 -webkit-

Opmerking:Oudere versies van Internet Explorer (4.0 tot 8.0) ondersteunen de verouderde niet-standaard 'filter'-eigenschap. Deze wordt voornamelijk gebruikt voor ondoorzichtigheid bij de ondersteuning van IE8 en oudere versies.