Stijl filter eigenschap

Definitie en gebruik

filter Voeg visuele effecten toe aan afbeeldingen (zoals vervaging en verzadiging).

Zie ook:

CSS referentiemanualFilter-eigenschap

Voorbeeld

Verander de kleur van het beeld in zwart-wit (100% grijs):

document.getElementById("myImg").style.filter = "grayscale(100%)";

Probeer het zelf uit

Syntax

Geef de filter-eigenschap terug:

object.style.filter

Stel de filter-eigenschap in:

object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

Filter functie

注释：Een filter met een percentage (bijv. 75%) accepteert ook decimale waarden (dus 0.75).

Filter Beschrijving
none Stelt geen effect in.
blur(px)

Werk een vaagheidsfilter toe aan het beeld. Grotere waarden resulteren in meer vaagheid.

Als deze waarde niet wordt vastgesteld, wordt 0 gebruikt.
brightness(%)

Pas de helderheid van het beeld aan.

0% zal het beeld volledig zwart maken.

100% (1) is de standaardwaarde, wat het oorspronkelijke beeld betekent.

Waarden boven de 100% zullen een helderder resultaat bieden.
contrast(%)

Pas de contrastverhouding van het beeld aan.

0% zal het beeld volledig zwart maken.

100% (1) is de standaardwaarde, wat het oorspronkelijke beeld betekent.

Waarden boven de 100% zullen een lagere contrastverhouding bieden.
drop-shadow(h-shadow v-shadow blur spread color)

Breng een projectie-effect toe aan het beeld.

Mogelijke waarden：

h-shadow Verplicht. Stel de pixelwaarde van de horizontale schaduw in. Negatieve waarden zullen de schaduw aan de linkerkant van het beeld plaatsen.

v-shadow Verplicht. Stel de pixelwaarde van de verticale schaduw in. Negatieve waarden zullen de schaduw boven het beeld plaatsen.

blur Optioneel. De derde waarde, moet in pixels worden aangegeven. Voeg een vervagingseffect toe aan de schaduw. Grotere waarden zullen meer vervaging veroorzaken (de schaduw wordt groter en helderder). Negatieve waarden zijn niet toegestaan. Als deze niet wordt vastgesteld, zal deze 0 zijn (de rand van de schaduw is scherp).

spread Optioneel. De vierde waarde, moet in pixels worden aangegeven. Positieve waarden zullen de schaduw vergroten en groter maken, negatieve waarden zullen de schaduw verkleinen. Als deze niet wordt vastgesteld, zal deze 0 zijn (de schaduw is hetzelfde formaat als het element).

注释：Chrome, Safari en Opera, mogelijk ook andere browsers, ondersteunen niet de vierde lengte; als deze wordt toegevoegd, zal deze niet worden weergegeven.

colorOptioneel. Voeg een kleur toe aan de schaduw. Als dit niet wordt vastgesteld, hangt de kleur af van de browser (meestal zwart).

Tip：Deze filter is vergelijkbaar met de box-shadow-eigenschap.
grayscale(%)

Maak het beeld grijs.

0% (0) is de standaardwaarde, wat het oorspronkelijke beeld betekent.

100% zal het beeld volledig grijs maken (gebruikt voor zwart-witbeelden).

注释：Negative values are not allowed.
hue-rotate(deg)

Breng een toonrotatie toe aan het beeld. De waarde definieert het aantal graden dat de beeldmonsters worden aangepast rond de kleurenm环.

0deg is de standaardwaarde, wat het oorspronkelijke beeld betekent.

注释：De maximale waarde is 360 graden.
invert(%)

Keer de monsters in het beeld om.

0% (0) is de standaardwaarde, wat het oorspronkelijke beeld betekent.

100% zal het beeld volledig omdraaien.

注释：Negative values are not allowed.
opacity(%)

Stel het ondoorzichtigheidsniveau van het beeld in. Het ondoorzichtigheidsniveau beschrijft het niveau van doorzichtigheid, waarbij:

0% is volledig doorzichtig.

100% (1) is de standaardwaarde, wat het oorspronkelijke beeld (zonder doorschijnendheid) betekent.

注释：Negative values are not allowed.

Tip：Deze filter is vergelijkbaar met de opacity-eigenschap.
saturate(%)

Pas de verzadiging van het beeld aan.

0% (0) zal het beeld volledig ongesatureerd maken.

100% is de standaardwaarde, wat het oorspronkelijke beeld betekent.

Waarden boven de 100% zullen overgesaturerde resultaten bieden.

注释：Negative values are not allowed.
sepia(%)

Maak het beeld bruin.

0% (0) is de standaardwaarde, wat het oorspronkelijke beeld betekent.

100% zal het beeld volledig bruin maken.

注释：Negative values are not allowed.

Technical details

CSS version: CSS3

Browser support

The numbers in the table indicate the first browser version to fully support this property.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
53.0 13.0 35.0 9.1 40.0