Velikost masky - Triky CSS

Anonim

V CSS určuje vlastnost mask-size velikost obrazu vrstvy masky. V mnoha ohledech se velmi podobá background-sizenemovitosti.

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

Maskování umožňuje zobrazit vybrané části prvku a ostatní skrýt. Velikost masky je definována mask-sizevlastností.

V následující ukázce si můžete pohrát s velikostí obrázku vrstvy masky:

Syntax

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Počáteční hodnota: auto
  • Platí pro: Všechny prvky. V SVG platí pro elementy kontejneru s výjimkou elementu, všech grafických elementů a elementu
  • Zděděno: ne
  • Typ animace: opakovatelný seznam

V zásadě se říká, že syntaxe přijímá hodnotu velikosti pozadí ( ), která může být buď jedna nebo dvě délky a / nebo procenta ( ), nastavena na autonebo jedno ze dvou klíčových slov ( covera contain).

  • Pokud jsou použity dvě hodnoty , první hodnota určuje šířku obrazu masky a druhá hodnota určuje jeho výšku .
  • Když se použije jedna hodnota, která neobsahuje nebo nepokrývá, definuje šířku obrazu masky a předpokládá se, ž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;

Definice hodnot

  • : Libovolný platný a nezáporné délka CSS, jako je například px, em, rema %, mezi jinými.
  • : Určuje velikost obrazu vrstvy masky jako procentuální hodnotu vzhledem k oblasti umístění masky, která je nastavena hodnotou mask-origin. Ve výchozím nastavení je tato hodnota border-box, což znamená, že obsahuje ohraničení, odsazení a obsah pole.
  • auto: Použije se vnitřní výška a šířka obrazu masky a pro obrázky, jako jsou přechody, které nemají vnitřní rozměry, se vykreslí ve velikosti oblasti pro umístění masky.
  • contain: Změní měřítko obrazu masky při zachování jejího vnitřního proporce tak, aby se její šířka i výška vešly do oblasti pro umístění masky. U obrázků, jako jsou přechody, které nemají vnitřní rozměry, se vykreslí ve velikosti oblasti pro umístění masky.
  • cover: Změní měřítko obrazu masky při zachování jejího vnitřního proporce tak, aby jak její šířka, tak výška mohla zcela pokrýt oblast pro umístění masky. U obrázků, jako jsou přechody, které nemají vnitřní rozměry, se vykreslí ve velikosti oblasti pro umístění masky.
  • initial: Použije výchozí nastavení vlastnosti, což je auto.
  • inherit: Přijme hodnotu velikosti masky nadřazeného objektu.
  • unset: Odstraní proud mask-sizez prvku.

Použití více hodnot

Tato vlastnost může převzít seznam hodnot velikostí masky oddělených čárkami a každá hodnota se použije na odpovídající obrázek vrstvy masky uvedený ve mask-imagevlastnosti.

V následujícím příkladu první hodnota určuje velikost prvního obrázku, druhá hodnota určuje velikost druhého obrázku atd.

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

autohodnota

Pokud je hodnota mask-sizevlastnosti zadána jako auto, takto:

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

… Poté se obrázek masky změní v odpovídajících směrech, aby se zachoval její poměr stran. To znamená, že můžeme získat různé výsledky v závislosti na vnitřních rozměrech a poměru obrazu.

Poměr / rozměr Žádné vnitřní rozměry Jedna vnitřní dimenze Obě vnitřní dimenze
Má proporce Místo toho bylo vykresleno, jako by obsahovalo Vykresleno ve velikosti určené touto jednou dimenzí a poměrem Vykreslení v této velikosti
Žádný podíl Vykresleno ve velikosti oblasti pro umístění masky Vykreslení pomocí vnitřní dimenze a odpovídající dimenze oblasti pro umístění masky N / A

Pokud mask-sizeje zadána hodnota autoa další neautomatická hodnota, jako je následující:

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

… pak:

  • pokud má obrázek vnitřní poměr , vypočítá se automatická hodnota pomocí zadané dimenze a vnitřního podílu.
  • pokud obrázek nemá žádnou vlastní proporci , hodnota auto se stane odpovídající vnitřní dimenzí obrazu, pokud existuje, a pokud není, bude auto odpovídající dimenzí oblasti umístění masky.

Porozumění coveracontain

Následující video vysvětluje, jak fungují klíčová slova obsahující a obal. Všimněte si, že počáteční poloha vrstvy masky je ve středu polohovací oblasti:

Pokud obrázek nemá žádný skutečný poměr stran, pak zadáním možnosti cover nebo contain vykreslíte obrázek masky ve velikosti oblasti pro umístění masky.

A co je sakra vnitřní rozměr a vnitřní proporce?

Vnitřní rozměry jsou šířka a výška prvku a vlastní poměr je jejich poměr.

  • Bitmapový obrázek jako formát PNG má vždy vnitřní rozměry a vlastní poměr.
  • Vektorový obrázek, jako je formát SVG, může mít obě vnitřní rozměry. Proto má také vlastní podíl. Může také mít jeden nebo žádné vnitřní rozměry a v obou případech může nebo nemusí mít vlastní podíl.
  • Přechody jsou jako obrázky bez vnitřních rozměrů nebo vnitřního poměru.

Podpora prohlížeče

TJ Okraj Firefox Chrome Safari Opera
Ne 18+ 53+ Všechno 4+ 70
Android Chrome Android Firefox Prohlížeč Android iOS Safari Opera Mini
85+ 79+ 4,4+ Všechno Všechno
Zdroj: caniuse

Ukázka

Následující ukázka používá délku velikosti masky. Zkuste změnit hodnotu na jiné typy hodnot v kódu a zkontrolujte výsledek.

Více informací

  • Maskovací modul CSS úrovně 1
  • Ořezávání a maskování v CSS
  • Clipping vs. Masking: When to Use each
  • # 185: Hraní s maskami CSS (video)