CSS filter ominaisuus

Määrittely ja käyttö

filter-ominaisuus määrittelee elementin (yleensä <img>) visuaaliset vaikutukset (kuten sumennus ja satasus).

Katso myös:

CSS-opas:CSS-kuvat

HTML DOM -viittausopas:filter-ominaisuus

Esimerkki

Muuta kaikki kuvat mustavalkoisiksi (100% harmaaksi):

img {
  filter: grayscale(100%);
}

Kokeile itse

Vinkki:Lisää TIY-esimerkkejä löydät sivun alalta.

CSS kieli

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

Vinkki:Jos käytetään useita suodattimia, erottele ne välilyönnillä (katso alla olevat lisäesimerkit).

Tekninen yksityiskohta

Oletusarvo: none
Perintä: Ei
Animaation tekeminen: Tuki. Katso:Animaatiot ja siihen liittyvät ominaisuudet.
Versio: CSS3
JavaScript-grammatiikka: object.style.filter="grayscale(100%)"

Suodattimofunktio

Huomautus:Käytä prosenttiosuutta (esim. 75%) suodattimelle, hyväksytään myös desimaalimuoto (esim. 0.75).

Suodatin Kuvaus
none Oletusarvo. Määritä ei-vaikutus.
blur(px)

Käytä varjoeffectia kuvan päälle. Suurempi arvo tuottaa enemmän hämärtymistä.

Jos määritetty arvo, käytetään 0.
brightness(%)

Muuta kuvan kirkkautta.

  • 0% tekee kuvasta täysin mustan.
  • Oletusarvo on 100%, mikä edustaa alkuperäistä kuvaa.
  • Arvot yli 100% tarjoavat kirkkaampia tuloksia.
contrast(%)

Muuta kuvan kontrastia.

  • 0% tekee kuvasta täysin mustan.
  • Oletusarvo on 100%, mikä edustaa alkuperäistä kuvaa.
  • Arvot yli 100% tarjoavat kontrastivampia tuloksia.
drop-shadow(h-shadow v-shadow blur spread color)

Käytä varjoeffectia kuvan päälle.

Mahdolliset arvot:

  • h-shadow - pakollinen. Määritä horisontaalinen varjo pikselin arvolla. Negatiivinen arvo sijoittaa varjon kuvan vasemmalle puolelle.
  • v-shadow - pakollinen. Määritä pystysuuntainen varjo pikselin arvolla. Negatiivinen arvo sijoittaa varjon kuvan yläpuolelle.

blur - valinnainen. Tämä on kolmas arvo, yksikkö on pikseli. Lisää varjoon hämärtymisvaikutuksen. Arvojen suurempi määrä luo enemmän hämärtymistä (varjo kasvaa ja kirkastuu). Ei sallita negatiivisia arvoja. Jos ei määritetty arvoa, käytetään 0 (varjon reunat ovat terävät).

spread - valinnainen. Tämä on neljäs arvo, yksikkö on pikseli. Positiivinen arvo laajentaa varjoa ja suurennetaan, negatiivinen arvo pienentää varjoa. Jos ei määritetty arvoa, käytetään 0 (varjo on elementin koolla).

Huomautus:Chrome, Safari ja Opera, ehkä myös muut selaimet, eivät tue neljättä pituusarvoa; jos lisätään, sitä ei näytetä.

color - valinnainen. Lisää varjoon väri. Jos ei määritetty, väri riippuu selaimesta (yleensä musta).

Tämä esimerkki luo punaista varjostusta, sekä horisontaalinen että vertikaalinen suunta 8px, ja 10px hämärtymisvaikutus:

filter: varjo(8px 8px 10px punainen);

Vinkki:Tämä suodatin muistuttaa box-shadow-ominaisuutta.
grayscale(%%);

Muunna kuva harmaasävyiseksi.

  • 0% (0) on oletusarvo, joka edustaa alkuperäistä kuvaa.
  • 100% tekee kuvasta täysin harmaan (kuvaa mustavalkoiselle).

Huomautus:Negatiivisia arvoja ei sallita.
hue-rotate(deg);

Käytä väriä kuvassa kiertoefektiä. Tämä arvo määrittää sävykierroksen asteen. Oletusarvo on 0deg, joka edustaa alkuperäistä kuvaa.

Huomautus:Suurin arvo on 360deg.
invert(%%);

Käännä kuvan näytteet.

  • 0% (0) on oletusarvo, joka edustaa alkuperäistä kuvaa.
  • 100% tekee kuvasta täysin käänteisen.

Huomautus:Negatiivisia arvoja ei sallita.
opacity(%%);

Aseta kuvan läpinäkyvyysaste. opacity-level kuvaa läpinäkyvyysastetta, jossa:

  • 0% on täysin läpinäkyvä.
  • 100% (1) on oletusarvo, joka edustaa alkuperäistä kuvaa (läpinäkyvyys).

Huomautus:Negatiivisia arvoja ei sallita.

Vinkki:Tämä suodatin muistuttaa opacity-ominaisuutta.
saturate(%%);

Aseta kuvan saturaatio.

  • 0% (0) tekee kuvasta täysin nesaturaarisen.
  • 100% on oletusarvo ja edustaa alkuperäistä kuvaa.
  • Arvot yli 100% tarjoavat ylisaturaarisia tuloksia.

Huomautus:Negatiivisia arvoja ei sallita.
sepia(%%);

Muunna kuva ruskeaksi.

  • 0% (0) on oletusarvo, joka edustaa alkuperäistä kuvaa.
  • 100% tekee kuvasta täysin ruskean.

Huomautus:Negatiivisia arvoja ei sallita.
url();

url()-funktio hyväksyy SVG-suodattimen XML-tiedoston sijainnin ja voi sisältää viittauksen tiettyyn suodattimelementtiin. Esimerkki:

filter: url(svg-url#element-id);
initial Aseta tämä ominaisuus sen oletusarvon arvoon. Katso initial.
inherit Periisi vanhemmalta elementiltään tämän ominaisuuden arvon. Katso inherit.

Lisää esimerkkejä

Sumuesimerkki

Lisää kuvalle sumuinen efekti:

img {
  filter: sumu(5px);
}

Kokeile itse

Sumuesimerkki 2

Lisää kuvalle sumuinen taustakuva:

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

Kokeile itse

Kirkkausesimerkki

Muuta kuvan kirkkautta:

img {
  filter: kirkkaus(200%);
}

Kokeile itse

Kontrastiesimerkki

Muuta kuvan kontrastia:

img {
  filter: kontrasti(200%);
}

Kokeile itse

Varjoesimerkki

Lisää kuvalle varjoefekti:

img {
  filter: varjo(8px 8px 10px harmaa);
}

Kokeile itse

Harmaasävyinen esimerkki

Muunna kuva harmaasävyiseksi:

img {
  filter: grayscale(50%);
}

Kokeile itse

Väriasteen kiertoesimerkki

Sovita väriasteen kierto kuvalle:

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

Kokeile itse

Käännösesimerkki

Käännä kuvan näytteet ympäri:

img {
  filter: invert(100%);
}

Kokeile itse

Läpinäkyvyysesimerkki

Aseta kuvan läpinäkyvyysaste:

img {
  filter: opacity(30%);
}

Kokeile itse

Sävytysesimerkki

Määritä kuvan sävytys:

img {
  filter: saturate(800%);
}

Kokeile itse

Ruskean esimerkki

Muunna kuva ruskeaksi:

img {
  filter: sepia(100%);
}

Kokeile itse

Käytä useita suodattimia

Jos käytetään useita suodattimia, erottakaa ne välilyönnillä. Huomaa, että järjestys on tärkeää (esimerkiksi sepia() jälkeen käytettynä grayscale() tuottaa täysin harmaan kuvan):

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

Kokeile itse

Kaikki suodattimet

Näytä kaikki suodatusfunktiot:

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

Kokeile itse

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee tätä ominaisuutta täysin.

Merkinnät -webkit- etuliitteen numerot tarkoittavat käyttöönottoversion ensimmäistä versiota.

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-

Huomautus:Vanhemmat Internet Explorer -versiot (4.0 - 8.0) tukevat vanhentunutta epästandardia "filter"-ominaisuutta. Kun tarvitaan IE8:n ja vanhempien versioiden tukea, sitä käytetään pääasiassa läpinäkyvyyteen.