Podrijetlo maske - CSS-trikovi

mask-originOdređuje maska položaj područje masku sloja slike. Drugim riječima, definira gdje je podrijetlo slike sloja maske, bilo da je to rub obruba, udaljenost ili okvir za sadržaj.

.element ( mask-image: url(star.svg); mask-origin: content-box; )

Za elemente prikazane kao jedan okvir, mask-originodređuje područje pozicioniranja maske. Za elemente koji se prikazuju kao višestruki okviri (npr. Umetnuti okviri u nekoliko redaka, okviri na nekoliko stranica) svojstvo određuje na kojim okvirima box-decoration-breakse određuje područje pozicioniranja maske.

Ovo svojstvo radi poput background-originsvojstva, osim što ima različitu početnu vrijednost i tri dodatne vrijednosti koje se primjenjuju na SVG elemente.

U sljedećoj demonstraciji možete promijeniti podrijetlo slike sloja maske. Ispod je ista slika koja pokazuje učinak boljeg maskiranja i označavanja područja obruba i obloga:

Sintaksa

mask-origin: = content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box

Početna vrijednost: border-box
Odnosi se na: Svi elementi. U SVG-u se odnosi na elemente spremnika isključujući element, sve grafičke elemente i element.
Naslijeđeno: ne
Vrsta animacije: diskretna

Vrijednosti

/* Keywords */ mask-origin: content-box; mask-origin: padding-box; mask-origin: border-box; mask-origin: margin-box; mask-origin: fill-box; mask-origin: stroke-box; mask-origin: view-box;   /* Global values */ mask-origin: intial; mask-origin: inherit; mask-origin: unset;

Definicije vrijednosti

content-box: Položaj je u odnosu na okvir sa sadržajem. Podrijetlo se mask-imagenalazi u gornjem lijevom kutu ruba sadržaja.
padding-box: Položaj je u odnosu na okvir za popunjavanje. Podrijetlo slike maske 0 0smješteno je u gornjem lijevom kutu ruba obloge, a to 100% 100%je donji desni kut.
border-box: Zadana vrijednost, koja postavlja položaj u odnosu na okvir s okvirom.
margin-box: Položaj je u odnosu na okvir margine
fill-box: Položaj je u odnosu na okvir za ograničavanje predmeta
stroke-box: Položaj je u odnosu na okvir za ograničavanje poteza
view-box: Koristi najbliži prikaz SVG-a kao referentni okvir. Ako je viewBoxatribut naveden za SVG element stvaranja prozora, referentni okvir postavlja se na ishodište koordinatnog sustava uspostavljenog viewBoxatributom, a dimenzija referentnog okvira postavlja na widthi heightvrijednosti viewBoxatributa.
initial: Primjenjuje zadanu postavku svojstva, koja jeborder-box
inherit: Prihvaća mask-originvrijednost roditelja.
unset: Uklanja struju mask-originiz elementa.

Korištenje više vrijednosti

Ovo svojstvo može uzeti popis vrijednosti odvojenih zarezom za podrijetlo maske, gdje se svaka vrijednost primjenjuje na odgovarajuću sliku sloja maske navedenu u mask-imagesvojstvu. U slijedećem primjeru prva vrijednost određuje podrijetlo prve slike, druga vrijednost određuje podrijetlo druge slike itd.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-origin: padding-box, border-box, content-box; )

Bilješke

Za SVG elemenata koji nemaju CSS kutije, vrijednosti content-box, padding-boxi border-boxračunanje u fill-box.
Za elemente s pridruženim CSS okvirom za raspored vrijednosti fill-box, stroke-boxi view-boxizračunavaju u initialvrijednosti od mask-origin, koja je border-box.

Demo

Kada se slika sloja maske ponovi, prva se instalacija pozicionira u gornjem lijevom kutu navedenog područja pozicioniranja, a zatim se ponavlja, počevši od tamo, prema vrijednosti mask-repeatsvojstva.

Promijenite vrijednost za mask-originu sljedećem pokaznom prikazu da biste dobili bolju ideju o tome što se događa: