Style filter-attribut

Definition och användning

filter Tillämpa visuella effekter på bilder (t.ex. suddighet och mättnad).

Se också:

CSS Referenshandbok:filter-attribut

Exempel

Ändra bildens färg till svart och vitt (100% gråtoner):

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

Prova själv

Syntaks

Returnera filter-attribut:

object.style.filter

Ställ in filter-attribut:

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

Filter-funktion

注释：Filter som används med procentvärden (t.ex. 75%) accepterar också decimalvärden (dvs. 0,75).

Filter Beskrivning
none Ingen effekt specificerad.
blur(px)

Tillämpa suddig effekt på bilden. Större värden skapar mer suddighet.

Om inget värde specificerats, används 0.
brightness(%)

Justera bildens ljusighet.

0% kommer att göra bilden helt svart.

100% (1) är standardvärdet, vilket betyder originalbilden.

Värden över 100% kommer att ge ett ljusare resultat.
contrast(%)

Justera bildens kontrast.

0% kommer att göra bilden helt svart.

100% (1) är standardvärdet, vilket betyder originalbilden.

Värden över 100% kommer att ge ett lägre kontrastresultat.
drop-shadow(h-shadow v-shadow blur spread color)

Applicera en skugga till bilden.

Möjliga värden:

h-shadow - nödvändigt. Specificera pixelvärdet för den horisontella skuggan. Negativa värden kommer att placera skuggan till vänster om bilden.

v-shadow - nödvändigt. Specificera pixelvärdet för den vertikala skuggan. Negativa värden kommer att placera skuggan ovanför bilden.

blur - valfritt. Tredje värdet, måste vara i pixlar. Lägg till suddighet till skuggan. Större värden skapar mer suddighet (skuggan blir större och ljusare). Det är inte tillåtet att använda negativa värden. Om inget värde specificerats, används 0 (skuggans kant är skarp).

spread - valfritt. Fjärde värdet, måste vara i pixlar. Positiva värden kommer att göra skuggan större och tydligare, negativa värden kommer att göra skuggan mindre. Om inte specificerat, kommer det att vara 0 (skuggan kommer att vara lika stor som elementet).

注释：Chrome, Safari och Opera, kanske också andra webbläsare, stöder inte den fjärde längden; om den läggs till, kommer den inte att visas.

color：valfritt. Lägg till färg till skuggan. Om inte specificerat, beror färgen på webbläsaren (vanligtvis svart).

Tips：Denna filter är liknande box-shadow-attributet.
grayscale(%)

Konvertera bilden till gråskala.

0% (0) är standardvärdet, vilket betyder originalbilden.

100% kommer att göra bilden helt grå (för svartvita bilder).

注释：Negativa värden är inte tillåtna.
hue-rotate(deg)

Applicera tonrotation på bilden. Värdet definierar grader som bildens prov kommer att justeras runt färgcirkeln.

0deg är standardvärdet, vilket betyder originalbilden.

注释：Maxvärdet är 360 grader.
invert(%)

Omvänd prov i bilden.

0% (0) är standardvärdet, vilket betyder originalbilden.

100% kommer att göra bilden helt omvänd.

注释：Negativa värden är inte tillåtna.
opacity(%)

Ställ in bildens opacitet. Opacitetsnivån beskriver genomskinlighetsnivån, där:

0% är helt genomskinlig.

100% (1) är standardvärdet, vilket betyder originalbilden (ingen genomskinlighet).

注释：Negativa värden är inte tillåtna.

Tips：Denna filter är liknande opacity-attributet.
saturate(%)

Justera bildens saturation.

0% (0) kommer att göra bilden helt osaturerad.

100% är standardvärdet, vilket betyder originalbilden.

Värden över 100% kommer att ge ett överdrivet färgsat resultat.

注释：Negativa värden är inte tillåtna.
sepia(%)

Konvertera bilden till mörkbrun.

0% (0) är standardvärdet, vilket betyder originalbilden.

100% kommer att göra bilden helt mörkbrun.

注释：Negativa värden är inte tillåtna.

Tekniska detaljer

CSS-version: CSS3

Webbläsarstöd

Numrerna i tabellen anger den första webbläsaren som helt stöder detta attribut.

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