CSS filtrai yra galingas įrankis, kurį autoriai gali naudoti, norėdami pasiekti įvairius vizualinius efektus (panašius į „Photoshop“ filtrus naršyklei). CSS filterypatybė suteikia prieigą prie efektų, tokių kaip suliejimas ar spalvų pakeitimas elemento perteikime prieš elemento rodymą. Filtrai paprastai naudojami vaizdo, fono ar kraštinės atvaizdavimui koreguoti.
Sintaksė yra:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Vertei galima naudoti keletą funkcijų:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- SVG filtrų pritaikymuicustom()- "netrukus"
Gali būti naudojamos kelios funkcijos, atskirtos tarpo.
.do-more-things ( filter: blur(20px) grayscale(20%); )Filtro funkcijos
Norėdami naudoti CSS filtro ypatybę, nurodykite vienos iš šių aukščiau išvardytų funkcijų vertę. Jei vertė neteisinga, funkcija grąžina „nėra“. Išskyrus atvejus, kai pažymėta, funkcijos, kurios ima reikšmę, išreikštą procentiniu ženklu (kaip 34%), taip pat priima vertę, išreikštą dešimtainiu (kaip 0,34).
Štai demonstracinė versija, leidžianti šiek tiek žaisti su atskirais filtrais:
pilka spalva ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Konvertuoja įvesties vaizdą į pilkos spalvos skalę. „Sumos“ vertė apibrėžia konversijos dalį. 100% vertė yra visiškai pilkos spalvos. 0% reikšmė palieka nepakitusią įvestį. Vertės nuo 0% iki 100% yra tiesiniai efekto daugikliai. Jei trūksta parametro „suma“, naudojama 100% reikšmė. Neigiamos reikšmės neleidžiamos.
sepija ()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Konvertuoja įvesties vaizdą į sepiją. „Sumos“ vertė apibrėžia konversijos dalį. 100% vertė yra visiškai sepija. 0 reikšmė palieka nepakitusią įvestį. Vertės nuo 0% iki 100% yra tiesiniai efekto daugikliai. Jei trūksta parametro „suma“, naudojama 100% reikšmė. Neigiamos reikšmės neleidžiamos.
prisotinti ()
filter: saturate(2); /* same as… */ filter: sature(200%);Sotinamas įvesties vaizdas. „Sumos“ vertė apibrėžia konversijos dalį. 0% vertė nėra visiškai prisotinta. 100% reikšmė palieka nepakitusią įvestį. Kitos reikšmės yra tiesiniai efekto daugikliai. Leidžiamos didesnės nei 100% vertės, suteikiant itin prisotintus rezultatus. Jei trūksta parametro „suma“, naudojama 100% reikšmė. Neigiamos reikšmės neleidžiamos.
pasukti atspalvį ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Taiko atspalvio pasukimą įvesties vaizde. „Kampo“ reikšmė nurodo laipsnių skaičių aplink spalvų apskritimą, kurio įvesties pavyzdžiai bus koreguojami. 0deg reikšmė palieka nepakitusią įvestį. Jei trūksta parametro „kampas“, naudojama reikšmė 0deg. Didžiausia vertė yra 360deg.
apversti ()
filter: invert(100%);Apverčia įvesties atvaizdo pavyzdžius. „Sumos“ vertė apibrėžia konversijos dalį. 100% vertė yra visiškai apversta. 0% reikšmė palieka nepakitusią įvestį. Vertės nuo 0% iki 100% yra tiesiniai efekto daugikliai. Jei trūksta parametro „suma“, naudojama 100% reikšmė. Neigiamos reikšmės neleidžiamos.
neskaidrumas ()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Taiko skaidrumą įvesties vaizdo pavyzdžiams. „Sumos“ vertė apibrėžia konversijos dalį. 0% vertė yra visiškai skaidri. 100% reikšmė palieka nepakitusią įvestį. Vertės nuo 0% iki 100% yra tiesiniai efekto daugikliai. Tai tolygu įvesties vaizdo pavyzdžių padauginimui iš sumos. Jei trūksta parametro „suma“, naudojama 100% reikšmė. Ši funkcija yra panaši į labiau nustatytą neskaidrumo savybę; skirtumas yra tas, kad naudojant filtrus kai kurios naršyklės užtikrina aparatūros pagreitį, kad būtų geresnis našumas. Neigiamos reikšmės neleidžiamos.
ryškumas ()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Taiko tiesinį daugiklį įvesties vaizdui, kad jis atrodytų daugiau ar mažiau ryškus. 0% reikšmė sukurs visiškai juodą vaizdą. 100% reikšmė palieka nepakitusią įvestį. Kitos reikšmės yra tiesiniai efekto daugikliai. Leidžiamos didesnės nei 100% vertės vertės, suteikiančios ryškesnių rezultatų. Jei trūksta parametro „suma“, naudojama 100% reikšmė.
kontrastas ()
filter: contrast(4); /* same as… */ filter: contrast(400%);Koreguoja įvesties kontrastą. 0% reikšmė sukurs visiškai juodą vaizdą. 100% reikšmė palieka nepakitusią įvestį. Leidžiamos vertės, viršijančios 100% sumą, suteikiančios mažiau kontrastingus rezultatus. Jei trūksta parametro „suma“, naudojama 100% reikšmė.
sulieti ()
filter: blur(5px); filter: blur(1rem);Taiko Gauso suliejimą įvesties vaizdui. „Spindulio“ reikšmė apibrėžia Gauso funkcijos standartinio nuokrypio vertę arba tai, kiek pikselių ekrane susilieja vienas su kitu, todėl didesnė vertė sukurs daugiau neryškumo. Jei nenurodomas parametras, naudojama 0 reikšmė. Parametras nurodomas kaip CSS ilgis, tačiau jis nepriima procentinių verčių.
mesti šešėlį()
filter: drop-shadow((2,3) ?)Taiko įvesties vaizdui šešėlio efektą. Šešėlis yra faktiškai neryški įvesties atvaizdo alfa kaukės versija, nubrėžta tam tikra spalva, sukomponuota po vaizdu. Funkcija priima tipo parametrą (apibrėžtą CSS3 fonuose), išskyrus tai, kad raktinis žodis „intarpas“ neleidžiamas.
Ši funkcija panaši į labiau nusistovėjusią langelio šešėlio savybę; skirtumas yra tas, kad naudojant filtrus kai kurios naršyklės užtikrina aparatūros pagreitį, kad būtų geresnis našumas.
„Šešėlis“ taip pat imituoja numatytų objektų kontūrus natūraliai, skirtingai nei box-shadowtai, kad keliu laikomas tik langelis.
Kaip ir teksto šešėlyje, nėra jokio „išplitimo“ parametro, kuris sukurtų vientisą šešėlį, didesnį už objektą.
URL ()
filter: url()url()Funkcija įgauna XML failą, kuriame konkrečiai SVG filtrą vietą, ir gali apimti inkarą į tam tikrą filtro elementas. Čia yra pamoka, kuri veikia kaip gražus įvadas į SVG filtrus su linksma demonstracija.
Animaciniai filtrai
Kadangi filtrai yra gyvybingi, jie gali atverti duris visai smagiai.
Pastabos
Jei norite manipuliuoti atvaizdavimu, galite derinti bet kokį skaičių funkcijų, tačiau tvarka vis tiek yra svarbi (ty naudojant grayscale()po to sepia()bus visiškai pilka išvestis).
Apskaičiuota vertė, išskyrus „nėra“, sukuria kaupimo kontekstą taip, kaip daro CSS neskaidrumas. Filtro ypatybė neturi įtakos tikslinio elemento dėžutės modelio geometrijai, net jei filtrai gali sukelti dažymą ne elemento krašto dėžutėje. Filtro funkcijos veikia bet kurias tikslinio elemento dalis. Tai apima bet kokį elemento, kuriam taikomas filtras, ir jo palikuonių turinį, foną, kraštines, teksto dekoravimą, kontūrą ir matomą slinkimo mechanizmą. Filtrai taip pat gali būti taikomi tiesioginiam turiniui, pvz., Atskiriems teksto intervalams.
Specifikacijoje taip pat pristatoma filter(image-URL, filter-functions)paveikslėlio įvyniojimo funkcija. Tai leistų filtruoti bet kokį vaizdą tuo metu, kai jį naudojate CSS. Pvz., Galite sulieti fono vaizdą, nesulydėdami teksto. Ši filtravimo funkcija dar nepalaikoma naršyklėse. Tuo tarpu pseudoelementui galite pritaikyti ir foną, ir filtrą, kad sukurtumėte panašų efektą.
IE patentuoti filtrai
Taip pat naudojosi filternuosavybe, pavyzdžiui:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Dažniausiai naudojamas neskaidrumui, kai reikia palaikyti IE 8 ir žemyn.
Daugiau informacijos
- W3C filtro efektų specifikacija
- http://html5-demos.appspot.com/static/css/filters/index.html
- Bennetto Feely filtrų galerija
- MDN dokumentai
- Ar galiu naudoti
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- Suprasti CSS filtro efektus
Naršyklės palaikymas
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 18 * | 35 | Ne | 79 | 6 * |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 4,4 * | 6,0–6,1 * |