Маска-слика - ЦСС-трикови

А maskу ЦСС-у скрива део елемента на који се примењује.

.el ( mask-image: url(star.svg); )

Рецимо да сте имали елемент са фотографском позадином и црно-белу СВГ графику за употребу као маску, попут ове:

Можете поставити слику као а, background-imageа маску као а mask-imageна исти елемент и добити нешто попут овог:

Маске имају много заједничког са позадином тако што их можете прилагодити величини, позиционирати их, поновити и сличне позадини. Погледајте сродна својства у наставку. Али ево још једне занимљивости у вези са маскама које деле са позадином: могу бити градијенти.

Ево те исте позадинске графике, само са linear-gradientмаском која је прекрива, што чини да врх прозирно бледи, а дно уопште није прозирно:

То функционише јер врх linear-gradientје transparent. Претпоставио бих да би то функционисало да је било whiteједнако дуго као што је mask-typeбило luminance, али то изгледа не функционише ни у једном прегледачу за мене.

Говорећи о luminanceмаскама, то изгледа не функционише за слике као маске које су за мене растерски формат попут ЈПГ или ПНГ. Ажурирање : Реадер Мицхеал Халл пише са демонстрацијом где то може имати неке везе са коришћењем дугих својстава. Чини се да Фирефок подржава овај концепт ако користите само стенографију.

Али алфа маске изгледају сасвим добро. Као и у растерским графикама које користе стварну алфа прозирност. Овако:

И само да докажемо повод, анимацију у боји коју можете видети кроз маску:

mask-imageИмовина се може користити директно у СВГ елемената. Попут провере ове елиптичне маске која такође има замућени филтер:

Изгледа некако као да бисте могли да закачите ту СВГ маску и примените је на друге елементе са, mask-image: url(#mask);али не сматрам да то заправо делује. Ради само у СВГ-у и има гадан споредни ефекат потпуног брисања слике ако се користи изван СВГ-а.

Подршка прегледача

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.