Veličina maske - CSS-trikovi

Anonim

U CSS-u svojstvo veličine maske navodi veličinu slike sloja maske. Na mnogo načina djeluje slično kao i background-sizeimovina.

.element ( mask-image: url(star.svg); mask-size: 200px 100px; )

Maskiranje vam omogućuje prikaz odabranih dijelova elementa dok skrivate ostatak. Veličina maske definirana je mask-sizesvojstvom.

U sljedećem pokaznom prikazu možete se poigrati s veličinom slike sloja maske:

Sintaksa

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Početna vrijednost: auto
  • 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: ponovljivi popis

To u osnovi govori da sintaksa prihvaća vrijednost veličine pozadine ( ) koja može biti jedna ili dvije duljine i / ili postoci ( ), postavljena na autoili jednu od dvije ključne riječi ( coveri contain).

  • Kada se koriste dvije vrijednosti , prva vrijednost određuje širinu slike maske, a druga vrijednost određuje njezinu visinu .
  • Kada se koristi jedna vrijednost koja ne sadrži ili pokriva, ona definira širinu slike maske i pretpostavlja se da je visina auto.

Vrijednosti

/* Lengths */ mask-size: 200px; /* width is 200px and height is auto */ mask-size: 50% 100%; /* width is 50% and height is 100% */ 
 /* Keywords */ mask-size: contain; mask-size: cover; 
 /* Global values */ mask-size: auto; mask-size: intial; mask-size: inherit; mask-size: unset;

Definicije vrijednosti

  • : Svaki valjani i ne-negativni duljina CSS, kao što su px, em, remi %, među ostalima.
  • : Određuje veličinu slike sloja maske kao postotnu vrijednost u odnosu na područje pozicioniranja maske, koje se postavlja vrijednošću mask-origin. Prema zadanim postavkama, ova vrijednost je border-box, što znači da sadrži obrube, popunjavanje i sadržaj okvira.
  • auto: Koristi se unutarnja visina i širina slike maske, a za slike poput gradijenata koji nemaju unutarnje dimenzije prikazuje se u veličini područja pozicioniranja maske.
  • contain: Skalira sliku maske, zadržavajući njezin unutarnji omjer na način da i njena širina i visina mogu stati unutar područja pozicioniranja maske. Za slike poput gradijenata koji nemaju unutarnje dimenzije, ona se prikazuje u veličini područja pozicioniranja maske.
  • cover: Skalira sliku maske, zadržavajući njezin unutarnji omjer na način da i njena širina i visina mogu u potpunosti pokriti područje pozicioniranja maske. Za slike poput gradijenata koji nemaju unutarnje dimenzije, ona se prikazuje u veličini područja pozicioniranja maske.
  • initial: Primjenjuje zadanu postavku svojstva, koja je auto.
  • inherit: Prihvaća vrijednost veličine maske roditelja.
  • unset: Uklanja struju mask-sizeiz elementa.

Korištenje više vrijednosti

Ovo svojstvo može uzeti popis vrijednosti odvojenih zarezom za veličine maski i svaka se vrijednost primjenjuje na odgovarajuću sliku sloja maske navedenu u mask-imagesvojstvu.

U slijedećem primjeru prva vrijednost određuje veličinu prve slike, druga vrijednost određuje veličinu druge slike itd.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-size: 100px 100%, auto, contain; )

autovrijednost

Ako je vrijednost mask-sizesvojstva navedena kao auto, ovako:

.element ( mask-size: auto auto; /* or */ mask-size: auto; )

... zatim se slika maske skalira u odgovarajućim smjerovima kako bi se zadržao omjer slike. Usprkos tome, možemo dobiti razne rezultate, ovisno o unutarnjim dimenzijama i udjelu slike.

Proporcija / dimenzija Nema suštinskih dimenzija Jedna suštinska dimenzija Obje unutarnje dimenzije
Ima proporciju Prikazane kao da je umjesto toga navedeno sadržavanje Renderirano u veličini određenoj tom jednom dimenzijom i udjelom Prikazano u toj veličini
Nema proporcije Renderirano u veličini područja za pozicioniranje maske Renderirano pomoću vlastite dimenzije i odgovarajuće dimenzije područja pozicioniranja maske N / A

Ako je vrijednost mask-sizespecificirana s autoi drugom neautomatskom vrijednošću, poput sljedeće:

.element ( mask-size: auto 200px; )

... onda:

  • ako slika ima unutarnji omjer , automatska vrijednost izračunava se pomoću navedene dimenzije i unutarnjeg proporcija.
  • ako slika nema unutarnji omjer , automatska vrijednost postaje odgovarajuća unutarnja dimenzija slike ako postoji, a ako nema, automatski će biti odgovarajuća dimenzija područja pozicioniranja maske.

Razumijevanje covericontain

Sljedeći video objašnjava kako funkcioniraju ključne riječi sadrže i pokrivaju. Imajte na umu da se početni položaj sloja maske nalazi u središtu područja pozicioniranja:

Ako slika nema svojstveni omjer širine i visine, tada određivanjem poklopca ili sadržaja prikazuje sliku maske u veličini područja pozicioniranja maske.

I samo ono što je do vraga unutarnja dimenzija i unutarnji omjer?

Unutarnje dimenzije su širina i visina elementa, a unutarnji udio je njihov omjer.

  • Bitmapa poput PNG formata uvijek ima unutarnje dimenzije i unutarnji omjer.
  • Vektorska slika poput SVG formata može imati obje unutarnje dimenzije. Stoga on također ima unutarnji udio. Također može imati jednu ili nikakve unutarnje dimenzije i, u oba slučaja, može ili ne mora imati unutarnji udio.
  • Gradijenti su poput slika bez unutarnjih dimenzija ili unutarnjih proporcija.

Podrška preglednika

IE Rub Firefox Krom Safari Opera
Ne 18+ 53+ svi 4+ 70
Android Chrome Android Firefox Android preglednik iOS Safari Opera Mini
85+ 79+ 4,4+ svi svi
Izvor: caniuse

Demo

Sljedeći demo koristi duljinu za veličinu maske. Pokušajte promijeniti vrijednost u druge vrste vrijednosti u kodu i provjerite rezultat.

Više informacija

  • CSS modul maskiranja razina 1
  • Isecanje i maskiranje u CSS-u
  • Isecanje i maskiranje: kada koristiti svaku
  • # 185: Igranje s CSS maskama (video)