Stylen suodinominaisuus

Määritelmä ja käyttö

filter Lisää kuvalle visuaalisia vaikutuksia (kuten sumeuttaminen ja sävytys).

Katso myös:

CSS viittausoppikirja:Suodinominaisuus

Esimerkki

Muuta kuvan värit mustavalkoisiksi (100% harmaaksi):

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

Kokeile itse

Syntaksi

Palauta suodinominaisuus:

objekti.style.filter

Aseta suodinominaisuus:

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

Suodin-funktio

Huomautus：Suodin, joka käytetään prosenttiosuuden (esim. 75%) muodossa, hyväksyy myös desimaaliarvot (eli 0.75).

Suodin Kuvaus
none Määritä ei mitään vaikutusta.
blur(px)

Käytä kuvaa sumeuttamiseksi. Suuret arvot aiheuttavat enemmän sumeuttamista.

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

Säädä kuvan kirkkautta.

0% tekee kuvasta täysin mustan.

100% (1) on oletusarvo, joka edustaa alkuperäiskuvaa.

Yli 100% arvo tarjoaa kirkkaamman tuloksen.
contrast(%)

Säädä kuvan kontrastia.

0% tekee kuvasta täysin mustan.

100% (1) on oletusarvo, joka edustaa alkuperäiskuvaa.

Yli 100% arvo tarjoaa matalamman kontrastin tuloksen.
drop-shadow(h-shadow v-shadow blur spread color)

Sovella kuvalle varjoefektiä.

Mahdolliset arvot：

h-shadow Vakio. Määritä vaakasuuntainen varjon pikseliarvo. Negatiivinen arvo sijoittaa varjon kuvan vasemmalle puolelle.

v-shadow Vakio. Määritä pystysuuntainen varjon pikseliarvo. Negatiivinen arvo sijoittaa varjon kuvan yläpuolelle.

blur Vapaaehtoinen. Kolmas arvo, joka on annettava pikseleinä. Lisää varjoon sumennusta. Suurempi arvo aiheuttaa enemmän sumennusta (varjo kasvaa ja kirkastuu). Negatiivisia arvoja ei sallita. Jos ei määritetty, arvo on 0 (varjon reunat ovat terävät).

spread Vapaaehtoinen. Neljäs arvo, joka on annettava pikseleinä. Positiivinen arvo laajentaa ja suurennetaan varjoa, negatiivinen arvo pienentää ja supistaa varjoa. Jos ei määritetty, arvo on 0 (varjo on elementin koolla).

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

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

Vinkki：Tämä filteri muistuttaa box-shadow-ominaisuutta.
grayscale(%)

Muunna kuva harmaaksi.

0% (0) on oletusarvo, joka edustaa alkuperäiskuvaa.

100% tekee kuvasta täysin harmaan (kuvaa mustavalkoiselle).

Huomautus：Arvoja ei voi olla negatiivisia.
hue-rotate(deg)

Sovella sävykiertoa kuvalle. Arvo määrittää, kuinka monta astetta kuvan näytteet sävytään ympäristä värikehyksestä.

0deg on oletusarvo, joka edustaa alkuperäiskuvaa.

Huomautus：Suurin arvo on 360 astetta.
invert(%)

Käännä kuvan näytteet.

0% (0) on oletusarvo, joka edustaa alkuperäiskuvaa.

100% tekee kuvasta täysin käänteisen.

Huomautus：Arvoja ei voi olla negatiivisia.
opacity(%)

Aseta kuvan läpinäkyvyysaste. Läpinäkyvyysaste kuvaa läpinäkyvyysastetta, jossa:

0% on täysin läpinäkyvä.

100% (1) on oletusarvo, joka edustaa alkuperäiskuvaa (ei läpinäkyvyyttä).

Huomautus：Arvoja ei voi olla negatiivisia.

Vinkki：Tämä filteri muistuttaa opacity-ominaisuutta.
saturate(%)

Säädä kuvan satuvuutta.

0% (0) tekee kuvasta täysin epäsatun.

100% on oletusarvo, joka edustaa alkuperäiskuvaa.

Yli 100% arvo tarjoaa ylivaltaisen tuloksen.

Huomautus：Arvoja ei voi olla negatiivisia.
sepia(%)

Muunna kuva ruskeaksi.

0% (0) on oletusarvo, joka edustaa alkuperäiskuvaa.

100% tekee kuvasta täysin ruskean.

Huomautus：Arvoja ei voi olla negatiivisia.

Tekninen yksityiskohta

CSS-versio: CSS3

Selaimen tuki

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

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