103 of 313 menu

Vlastnosť mask

Vlastnosť mask je skratkou pre všetky vlastnosti maskovania a umožňuje nastaviť: obrázok-masku, jej pozíciu, veľkosť, režim prelínania a ďalšie parametre.

Je vlastnosťou-skratskou pre nasledujúce vlastnosti: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Syntax

selektor {
	mask: [mask-image] [mask-position] / [mask-size]
	      [mask-repeat] [mask-origin] [mask-clip]
	      [mask-mode] [mask-composite];
}

Hodnoty

Hodnota	Popis
`none`	Vypína maskovanie (predvolená hodnota)
`url()`	Cesta k obrázku-maske (SVG, PNG)
`linear-gradient()`	Lineárny gradient ako maska
`radial-gradient()`	Radiálny gradient ako maska
`position`	Pozícia masky (top, center, 50% 50% a pod.)
`size`	Veľkosť masky (cover, contain, 100px 50px)
`repeat`	Opakovanie masky (no-repeat, repeat-x, space)
`mode`	Režim prelínania (alpha, luminance, match-source)
`composite`	Kompozícia masiek (add, subtract, intersect, exclude)

Príprava obrázkov

Majme obrázok prírody, ktorý budeme orezať, a SVG obrázky srdiečka a šípky, podľa ktorých budeme vyrezať:

<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">

:

Príklad . Maska-obrázok

Naložme masku-srdiečko na náš obrázok:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	background: red;
	mask: url("heart.svg") center/300px no-repeat;
}

:

Príklad . Pozícia masky

Maska-srdiečko v ľavom hornom rohu:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left top/150px no-repeat;
}

:

Príklad . Pozícia masky

Maska-srdiečko v pravom dolnom rohu:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") right bottom/150px no-repeat;
}

:

Príklad . Pozícia masky

Maska-srdiečko v strede vľavo:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left center/150px no-repeat;
}

:

Príklad . Pozícia masky

Maska-srdiečko v strede:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/150px no-repeat;
}

:

Príklad . Pozícia masky

Maska-srdiečko 100px zľava a 200px zhora:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") 100px 200px /150px no-repeat;
}

:

Príklad . Veľkosť masky cover

Hodnota cover škáluje masku, aby úplne pokryla prvok, pričom zachováva proporcie. Môže orezať okraje masky, ak proporcie nie sú zhodné:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/cover;
}

:

Príklad . Veľkosť masky contain

Hodnota contain škáluje masku, aby sa celá zmestila do prvku, pričom zachováva proporcie. Môže zanechať prázdne oblasti:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/contain no-repeat;
}

:

Príklad . Veľkosť masky

Pevná veľkosť nastavuje presné rozmery masky. Napríklad, urobme masku s veľkosťou 50px:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/50px no-repeat;
}

:

Príklad . Opakovanie no-repeat

Hodnota no-repeat vypína opakovanie masky. Maska sa zobrazí iba raz v zadanej pozícii:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") top left / 150px no-repeat;
}

:

Príklad . Opakovanie repeat-x

Hodnota repeat-x opakuje masku iba po horizontálnej osi:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left center / 50px repeat-x;
}

:

Príklad . Kompozícia add

Hodnota add sčíta viacero masiek (výsledok je zjednotenie všetkých masiek):

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 200px 30px / 150px no-repeat;
	mask-composite: add;
}

:

Príklad . Kompozícia intersect

Hodnota intersect zobrazuje iba oblasť prieniku masiek:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 50px 30px / 150px no-repeat;
	mask-composite: intersect;
}

:

Príklad . Kompozícia exclude

Hodnota exclude zobrazuje oblasti masiek, ktoré sa nepretínajú:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 50px 30px / 150px no-repeat;
	mask-composite: exclude;
}

:

Príklad . Kompozícia subtract

Hodnota subtract odpočíta druhú masku od prvej. Pre príklad urobme jedno srdiečko a odpočítajme od neho šípku:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 250px no-repeat,
		url("arrow.svg") 170px 80px / 120px no-repeat;
		
		
	mask-composite: subtract;
}

:

Príklad . Rozbalený zápis mask

Vlastnosť mask, zapísaná jednotlivými zložkami:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-origin: content-box;
	mask-clip: content-box;
	mask-mode: alpha;
	mask-composite: add;
}

:

Príklad . SVG pre obrázok

Použitie SVG-prvku ako masky pre obrázok:

<img id="image" src="image.jpg">
<svg width="0" height="0">
	<mask id="mask">
		<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
	</mask>
</svg>

#image {
	width: 500px;
	height: 281px;
	background: red;
	mask: url(#mask);
}

:

Príklad . SVG pre gradient

Použitie SVG-prvku ako masky pre gradient:

<div id="elem"></div>
<svg width="0" height="0">
	<mask id="star-mask">
		<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
	</mask>
</svg>

#elem {
	width: 500px;
	height: 300px;
	background: linear-gradient(45deg, red, blue);
	mask: url(#star-mask);
}

:

Pozrite tiež

vlastnosť mask-position,
určuje polohu masky vzhľadom na prvok
vlastnosť mask-image,
nastavuje obrázok pre masku
vlastnosť mask-mode,
určuje ako maska interaguje s pozadím
vlastnosť mask-size,
určuje veľkosť masky
vlastnosť mask-repeat,
určuje opakovanie masky
vlastnosť mask-origin,
určuje oblasť pozicionovania masky
vlastnosť mask-clip,
určuje oblasť orezania masky
vlastnosť mask-composite,
určuje ako sa viaceré masky kombinujú

↑

Slovenčina▼

Afrikaans Azərbaycan Български বাংলা Беларуская Čeština Dansk Deutsch Ελληνικά English Español Eesti Suomi Français हिन्दी Magyar Հայերեն Indonesia Italiano 日本語 ქართული Қазақ 한국어 Кыргызча Lietuvių Latviešu Македонски Melayu မြန်မာ Nederlands Norsk Polski Português Română Русский සිංහල Slovenščina Shqip Српски Srpski Svenska Kiswahili Тоҷикӣ ไทย Türkmen Türkçe Ўзбек Oʻzbek Tiếng Việt

Používame cookies na fungovanie stránky, analýzu a personalizáciu. Spracúvanie údajov prebieha v súlade s Politikou ochrany osobných údajov.

prijať všetky nastaviť odmietnuť