CSS filter egenskab

Definition og brug

filter egenskab definerer elementets (normalt <img>) visuelle effekt (som blødgøring og farvestyrke).

Se også:

CSS tutorial:CSS billede

HTML DOM referencehåndbog:filter egenskab

Eksempel

Gør alle billeder sort-hvide (100% grå):

img {
  filter: grayscale(100%);
}

Prøv det selv

Tip:Du kan finde flere TIY eksempler nedenfor på siden.

CSS syntaks

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

Tip:For at bruge flere filtre, adskil hver filter med mellemrum (se flere eksempler nedenfor på siden).

Tekniske detaljer

Standardværdi: none
Arv: Nej
Animationproduktion: Understøttet. Se venligst:Animation relaterede egenskaber.
Version: CSS3
JavaScript-syntaks: object.style.filter="grayscale(100%)"

Filterfunktion

Bemærkninger:Brug procentværdier (f.eks. 75%) for filtre, accepterer også, at værdien er decimal (f.eks. 0.75).

Filter Beskrivelse
none Standardværdi. Definerer ingen effekt.
blur(px)

Anvend en blødgøringseffekt på billedet. Større værdier vil skabe mere blødgøring.

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

Juster billedets lysstyrke.

  • 0% vil gøre billedet helt sort.
  • Standardværdien er 100%, hvilket repræsenterer det oprindelige billede.
  • Værdier over 100% vil give et mere lyst resultat.
contrast(%)

Juster billedets kontrast.

  • 0% vil gøre billedet helt sort.
  • Standardværdien er 100%, hvilket repræsenterer det oprindelige billede.
  • Værdier over 100% vil give et mere kontrastrigt resultat.
drop-shadow(h-shadow v-shadow blur spread color)

Anvend skyggeeffekt på billedet.

Mulige værdier:

  • h-shadow - nødvendig. Specificer pixelværdien for den horisontale skygge. Negative værdier vil placere skyggen til venstre for billedet.
  • v-shadow - nødvendig. Specificer pixelværdien for den vertikale skygge. Negative værdier vil placere skyggen øverst på billedet.

blur - valgfri. Dette er den tredje værdi, enheden skal være i pixels. Tilføj en blødgøringseffekt til skyggen. Jo større værdi, desto mere blødning oprettes (skyggen bliver større og lysere). Negative værdier er ikke tilladt. Hvis værdien ikke er specificeret, bruges 0 (skyggens kant er meget skarp).

spread - valgfri. Dette er den fjerde værdi, enheden skal være i pixels. Positiv værdi vil få skyggen til at udvide og blive større, mens negativ værdi vil få skyggen til at blive mindre. Hvis værdien ikke er specificeret, bruges 0 (skyggen er samme størrelse som elementet).

Bemærkninger:Chrome, Safari og Opera, måske 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).

Dette eksempel opretter en rød skygge med en bredde og højde på 8px og en blødgøringseffekt på 10px:

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

Tip:Denne filter ligner box-shadow egenskab.
grayscale(%)

Konverter billedet til gråtone.

  • 0% (0) er standardværdien, der repræsenterer det oprindelige billede.
  • 100% vil gøre billedet helt gråt (brugt til sort-hvide billeder).

Bemærkninger:Negativ værdi er ikke tilladt.
hue-rotate(deg)

Anvend farvetone rotation på billedet. Værdien definerer graderne i farvetonen. Standardværdien er 0deg, der repræsenterer det oprindelige billede.

Bemærkninger:Maksimal værdi er 360deg.
invert(%)

Omvend prøver i billedet.

  • 0% (0) er standardværdien, der repræsenterer det oprindelige billede.
  • 100% vil gøre billedet helt omvendt.

Bemærkninger:Negativ værdi er ikke tilladt.
opacity(%)

Indstil billedets gennemsigtighedsniveau. opacity-level beskriver gennemsigtighedsniveauet, hvor:

  • 0% er fuldstændig gennemsigtig.
  • 100% (1) er standardværdien, der repræsenterer det oprindelige billede (gennemsigtighed).

Bemærkninger:Negativ værdi er ikke tilladt.

Tip:Denne filter er ligner opacity egenskab.
saturate(%)

Indstil billedets mætning.

  • 0% (0) vil gøre billedet helt u-saturated.
  • 100% er standard og repræsenterer det oprindelige billede.
  • Værdier over 100% giver over-saturated resultater.

Bemærkninger:Negativ værdi er ikke tilladt.
sepia(%)

Konverter billedet til brunt.

  • 0% (0) er standardværdien, der repræsenterer det oprindelige billede.
  • 100% vil gøre billedet helt brunt.

Bemærkninger:Negativ værdi er ikke tilladt.
url();

url() funktionen accepterer placeringen af en SVG filter XML-fil og kan inkludere en anker til en specifik filterelement.

filter: url(svg-url#element-id);
initial Sæt denne egenskab til dens standardverdi. Se initial.
inherit Arv denne egenskab fra sin forældrelige element. Se inherit.

Flere eksempler

Sløringseksempel

Tilføj sløringseffekt til billedet:

img {
  filter: blur(5px);
}

Prøv det selv

Sløringseksempel 2

Anvend sløret baggrundsbillede:

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

Prøv det selv

Lysstyrkeeksempel

Juster billedets lysstyrke:

img {
  filter: brightness(200%);
}

Prøv det selv

Kontrasteksempel

Juster billedets kontrast:

img {
  filter: contrast(200%);
}

Prøv det selv

Skyggeeksempel

Anvend skyggeeffekt på billedet:

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

Prøv det selv

Gråtone eksempel

Konverter billedet til gråtone:

img {
  filter: grayscale(50%);
}

Prøv det selv

Farveskift eksempel

Anvend farveskift på billedet:

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

Prøv det selv

Inversion eksempel

Inverter prøverne i billedet:

img {
  filter: invert(100%);
}

Prøv det selv

Gennemsigtighed eksempel

Indstil billedets gennemsigtighedsniveau:

img {
  filter: opacity(30%);
}

Prøv det selv

Farvetone eksempel

Juster billedets farvetone:

img {
  filter: saturate(800%);
}

Prøv det selv

Sepia eksempel

Konverter billedet til sepia:

img {
  filter: sepia(100%);
}

Prøv det selv

Brug af flere filtre

For at bruge flere filtre skal de adskilles med mellemrum. Bemærk, at rækkefølgen er vigtig (f.eks. vil grayscale() efter sepia() producere et helt gråt billede):

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

Prøv det selv

Alle filtre

Demonstrer alle filterfunktioner:

.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);
}

Prøv det selv

Browserstøtte

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

Tallene med -webkit- indikerer den første version, der bruger præfikset.

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-

Bemærkninger:Ældre versioner af Internet Explorer (4.0 til 8.0) understøtter den forældede ikke-standard "filter"-egenskab. Når der er brug for støtte til IE8 og ældre versioner, bruges den primært til uigennemskinnelighed.