Veľkosť masky - Triky CSS

Anonim

V CSS určuje vlastnosť mask-size veľkosť obrázka vrstvy masky. V mnohých ohľadoch sa veľmi podobá background-sizenehnuteľnosti.

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

Maskovanie umožňuje zobraziť vybrané časti prvku a zvyšok skryť. Veľkosť masky je definovaná mask-sizevlastnosťou.

V nasledujúcej ukážke sa môžete pohrať s veľkosťou obrázka vrstvy masky:

Syntax

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Počiatočná hodnota: auto
  • Platí pre: Všetky prvky. V SVG sa vzťahuje na prvky kontajnera s výnimkou prvku, všetkých grafických prvkov a prvku
  • Zdedené: č
  • Typ animácie: opakovateľný zoznam

To v podstate hovorí, že syntax prijíma hodnotu veľkosti pozadia ( ), ktorá môže byť buď jedna alebo dve dĺžky a / alebo percentá ( ), nastavené na autoalebo jedno z dvoch kľúčových slov ( covera contain).

  • Ak sa použijú dve hodnoty , prvá hodnota určuje šírku obrázka masky a druhá hodnota jeho výšku .
  • Keď sa použije jedna hodnota, ktorá neobsahuje alebo zakrýva, definuje šírku obrazu masky a predpokladá sa, že je auto.

Hodnoty

/* 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;

Definície hodnoty

  • : Ľubovoľný platný a nezáporné dĺžka CSS, ako je napríklad px, em, rema %, medzi inými.
  • : Určuje veľkosť obrazu vrstvy masky ako percentuálnu hodnotu vzhľadom na oblasť umiestnenia masky, ktorá je nastavená hodnotou mask-origin. Táto hodnota je predvolene nastavená, čo border-boxznamená, že obsahuje okraje, výplň a obsah poľa.
  • auto: Používa sa vnútorná výška a šírka obrázka masky a pre obrázky, ako sú prechody, ktoré nemajú vnútorné rozmery, sa vykreslí vo veľkosti oblasti na umiestnenie masky.
  • contain: Zmenší mierku obrazu masky pri zachovaní jej vnútornej proporcie tak, aby sa jej šírka aj výška zmestili do oblasti na umiestnenie masky. Pre obrázky, ako sú prechody, ktoré nemajú vnútorné rozmery, sa vykreslí vo veľkosti oblasti na umiestnenie masky.
  • cover: Zmenší mierku obrazu masky pri zachovaní jej vnútornej proporcie takým spôsobom, že jej šírka aj výška môžu úplne pokryť oblasť umiestnenia masky. Pre obrázky, ako sú prechody, ktoré nemajú vnútorné rozmery, sa vykreslí vo veľkosti oblasti na umiestnenie masky.
  • initial: Použije predvolené nastavenie vlastnosti, ktoré je auto.
  • inherit: Prijme hodnotu veľkosti masky rodiča.
  • unset: Odstráni prúd mask-sizez prvku.

Použitie viacerých hodnôt

Táto vlastnosť môže obsahovať zoznam hodnôt veľkostí masiek oddelených čiarkami a každá hodnota sa použije na zodpovedajúci obrázok vrstvy masky uvedený vo mask-imagevlastnosti.

V nasledujúcom príklade prvá hodnota určuje veľkosť prvého obrázka, druhá hodnota určuje veľkosť druhého obrázka atď.

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

autohodnota

Ak je hodnota mask-sizenehnuteľnosti zadaná autotakto:

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

... potom sa obrázok masky zmení v zodpovedajúcich smeroch, aby sa zachoval jej pomer strán. To znamená, že môžeme získať rôzne výsledky v závislosti od vnútorných rozmerov a proporcií obrázka.

Rozmer / rozmer Žiadne vnútorné rozmery Jedna vnútorná dimenzia Oba vnútorné rozmery
Má proporcie Namiesto toho bolo zadané vykreslenie, akoby obsahovalo Vykreslené vo veľkosti určenej týmto jedným rozmerom a pomerom Vykreslené v tejto veľkosti
Žiadny pomer Vykreslené podľa veľkosti oblasti na umiestnenie masky Vykreslené pomocou vnútornej dimenzie a zodpovedajúcej dimenzie oblasti umiestnenia masky N / A

Ak je hodnota mask-sizezadaná s autoďalšou neautomatickou hodnotou, napríklad táto:

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

… Potom:

  • ak má obrázok vnútornú proporciu , vypočítava sa automatická hodnota pomocou zadanej dimenzie a vnútornej proporcie.
  • ak obrázok nemá vnútornú proporciu , automatická hodnota sa stane zodpovedajúcou vnútornou dimenziou obrázka, ak existuje, a ak nie, bude auto zodpovedajúcim rozmerom oblasti umiestnenia masky.

Porozumenie coveracontain

Nasledujúce video vysvetľuje, ako fungujú kľúčové slová obsahujú a kryjú. Upozorňujeme, že počiatočná poloha vrstvy masky je v strede pozičnej oblasti:

Ak obrázok nemá žiadny skutočný pomer strán, potom výberom možnosti Obal alebo obsahovať sa vykreslí obrázok masky vo veľkosti oblasti na umiestnenie masky.

A čo je sakra vnútorný rozmer a vnútorná proporcia?

Vnútorné rozmery sú šírka a výška prvku a vlastná proporcia je ich pomer.

  • Bitmapový obrázok ako formát PNG má vždy vnútorné rozmery a vlastný pomer.
  • Vektorový obrázok, napríklad formát SVG, môže mať obidve vnútorné rozmery. Preto má aj svoj vlastný podiel. Môže tiež mať jeden alebo žiadne vnútorné rozmery a v obidvoch prípadoch môže alebo nemusí mať skutočný rozmer.
  • Prechody sú ako obrázky bez vnútorných rozmerov alebo vnútorných proporcií.

Podpora prehliadača

IE Hrana Firefox Chrome Safari Opera
Nie 18+ 53+ Všetky 4+ 70
Android Chrome Android Firefox Prehliadač Android iOS Safari Opera Mini
85+ 79+ 4,4+ Všetky Všetky
Zdroj: caniuse

Ukážka

Nasledujúca ukážka používa dĺžku pre veľkosť masky. Skúste zmeniť hodnotu na iné typy hodnôt v kóde a skontrolujte výsledok.

Viac informácií

  • Maskovací modul CSS úrovne 1
  • Orezávanie a maskovanie v CSS
  • Orezanie vs. maskovanie: Kedy použiť každý
  • # 185: Hranie sa s maskami CSS (video)