Style filter egenskab

Definition og brug

filter Tilføj visuelle effekter til billeder (som sløring og farvesaturation).

Se også:

CSS ReferencerFilter-egenskab

Eksempel

Skift billedets farve til sort-hvid (100% gråtone):

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

Prøv det selv

Syntaks

Returnerer filter-egenskaben:

object.style.filter

Indstil filter-egenskaben:

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

Filter-funktion

注释：Filter med procenterbaserede værdier (f.eks. 75%) accepterer også decimale værdier (dvs. 0.75).

Filter Beskrivelse
none Angiver ingen effekt.
blur(px)

Anvend sløringseffekt på billeder. Højere værdier skaber mere sløring.

Hvis værdien ikke er specificeret, bruges 0.
brightness(%)

Juster billedets lysstyrke.

0% vil gøre billedet helt sort.

100% (1) er standardværdien, der repræsenterer det oprindelige billede.

Værdier over 100% vil give lysere resultater.
contrast(%)

Juster billedets kontrast.

0% vil gøre billedet helt sort.

100% (1) er standardværdien, der repræsenterer det oprindelige billede.

Værdier over 100% vil give lavere kontrastresultater.
drop-shadow(h-shadow v-shadow blur spread color)

Anvend skyggeeffekt på billedet.

Måske værdier:

h-shadow - Obligatorisk. Angiv pixelværdien for den horisontale skygge. Negativ værdi vil placere skyggen til venstre for billedet.

v-shadow - Obligatorisk. Angiv pixelværdien for den vertikale skygge. Negativ værdi vil placere skyggen over billedet.

blur - Valgfri. Tredje værdi, skal angives i pixels. Tilføj en sløret effekt til skyggen. Større værdier vil skabe mere sløring (skyggen bliver større og lysere). Negativ værdi er ikke tilladt. Hvis ikke specificeret, bruges 0 (skyggens kant er skarp).

spread - Valgfri. Fjerde værdi, skal angives i pixels. Positiv værdi vil øge skyggen og gøre den større, mens negativ værdi vil gøre skyggen mindre. Hvis ikke specificeret, vil det være 0 (skyggen vil være samme størrelse som elementet).

注释：Chrome, Safari og Opera, muligvis også andre browsere, understøtter ikke den fjerde længde; hvis tilføjet, vil den ikke blive vist.

color：Valgfri. Tilføj farve til skyggen. Hvis ikke specificeret, afhænger farven af browseren (normalt sort).

Vedvarende:Denne filterlignende filter er lig med box-shadow-egenskaben.
grayscale(%)

Konverter billedet til gråtone.

0% (0) er standardværdien, der repræsenterer det oprindelige billede.

100% vil gøre billedet helt gråtone (brugt til sort-hvide billeder).

注释：Negative værdier er ikke tilladt.
hue-rotate(deg)

Anvend farvetone rotation på billedet. Værdien definerer graderne, som billedets prøver vil blive justeret omkring farvetonen.

0deg er standardværdien, der repræsenterer det oprindelige billede.

注释：Maksimal værdi er 360 grader.
invert(%)

Omvend prøverne i billedet.

0% (0) er standardværdien, der repræsenterer det oprindelige billede.

100% vil gøre billedet helt omvendt.

注释：Negative værdier er ikke tilladt.
opacity(%)

Indstil billedets uigennemskinnelighedsniveau. Uigennemskinnelighedsniveauet beskriver transparensniveauet, hvoraf:

0% er helt gennemsigtigt.

100% (1) er standardværdien, der repræsenterer det oprindelige billede (uden gennemsigtighed).

注释：Negative værdier er ikke tilladt.

Vedvarende:Denne filterlignende filter er lig med opacity-egenskaben.
saturate(%)

Juster billedets mætning.

0% (0) vil gøre billedet helt umættet.

100% er standardværdien, der repræsenterer det oprindelige billede.

Værdier over 100% vil give overmættet resultat.

注释：Negative værdier er ikke tilladt.
sepia(%)

Konverter billedet til mørkebrunt.

0% (0) er standardværdien, der repræsenterer det oprindelige billede.

100% vil gøre billedet helt mørkebrunt.

注释：Negative værdier er ikke tilladt.

Tekniske detaljer

CSS version: CSS3

Browserstøtte

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

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