103 of 313 menu

Vlastnost mask

Vlastnost mask je zkratkou pro všechny vlastnosti maskování a umožňuje nastavit: obrázek-masku, její pozici, velikost, režim prolínání a další parametry.

Je zkratkou pro následující vlastnosti: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Syntaxe

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

Hodnoty

Hodnota	Popis
`none`	Vypne maskování (výchozí hodnota)
`url()`	Cesta k obrázku-masce (SVG, PNG)
`linear-gradient()`	Lineární gradient jako maska
`radial-gradient()`	Radiální gradient jako maska
`position`	Pozice masky (top, center, 50% 50% atd.)
`size`	Velikost masky (cover, contain, 100px 50px)
`repeat`	Opakování masky (no-repeat, repeat-x, space)
`mode`	Režim prolínání (alpha, luminance, match-source)
`composite`	Kompozice masek (add, subtract, intersect, exclude)

Příprava obrázků

Předpokládejme, že máme obrázek přírody, který budeme ořezávat, a SVG obrázky srdíčka a šipky, podle kterých budeme vyřezávat:

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

:

Příklad . Maska-obrázek

Aplikujme masku-srdíčko na náš obrázek:

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

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

:

Příklad . Pozice masky

Maska-srdíčko v levém horním rohu:

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

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

:

Příklad . Pozice masky

Maska-srdíčko v pravém dolním rohu:

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

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

:

Příklad . Pozice masky

Maska-srdíčko vlevo uprostřed:

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

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

:

Příklad . Pozice masky

Maska-srdíčko uprostřed:

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

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

:

Příklad . Pozice masky

Maska-srdíčko 100px zleva a 200px shora:

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

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

:

Příklad . Velikost masky cover

Hodnota cover škáluje masku tak, aby zcela pokryla prvek, zachovávajíc poměr stran. Může oříznout okraje masky, pokud se poměry stran neshodují:

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

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

:

Příklad . Velikost masky contain

Hodnota contain škáluje masku tak, aby se celá vešla do prvku, zachovávajíc poměr stran. Může zanechat prázdné oblasti:

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

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

:

Příklad . Velikost masky

Pevná velikost nastavuje přesné rozměry masky. Například vytvoříme masku o velikosti 50px:

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

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

:

Příklad . Opakování no-repeat

Hodnota no-repeat vypíná opakování masky. Maska se zobrazí pouze jednou na uvedené pozici:

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

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

:

Příklad . Opakování repeat-x

Hodnota repeat-x opakuje masku pouze podél vodorovné osy:

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

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

:

Příklad . Kompozice add

Hodnota add sčítá několik masek (výsledek je sjednocení všech masek):

<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;
}

:

Příklad . Kompozice intersect

Hodnota intersect zobrazuje pouze oblast průniku masek:

<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;
}

:

Příklad . Kompozice exclude

Hodnota exclude zobrazuje oblasti masek, které se nepřekrývají:

<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;
}

:

Příklad . Kompozice subtract

Hodnota subtract odečítá druhou masku od první. Jako příklad vytvoříme jedno srdíčko a odečteme z něj šipku:

<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;
}

:

Příklad . Rozepsaný zápis mask

Vlastnost mask zapsaná jednotlivými slož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;
}

:

Příklad . SVG pro obrázek

Použití SVG elementu jako masky pro obrázek:

<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);
}

:

Příklad . SVG pro gradient

Použití SVG elementu jako masky pro 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);
}

:

Viz také

vlastnost mask-position,
určuje pozici masky vzhledem k prvku
vlastnost mask-image,
nastavuje obrázek pro masku
vlastnost mask-mode,
určuje, jak maska interaguje s pozadím
vlastnost mask-size,
určuje velikost masky
vlastnost mask-repeat,
určuje opakování masky
vlastnost mask-origin,
určuje oblast pozicování masky
vlastnost mask-clip,
určuje oblast ořezu masky
vlastnost mask-composite,
určuje, jak se kombinuje více masek

↑

Čeština▼

Afrikaans Azərbaycan Български বাংলা Беларуская 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 Slovenščina Shqip Српски Srpski Svenska Kiswahili Тоҷикӣ ไทย Türkmen Türkçe Ўзбек Oʻzbek Tiếng Việt

Používáme soubory cookie pro fungování webu, analýzu a personalizaci. Zpracování údajů probíhá v souladu s Zásadami ochrany osobních údajů.

přijmout vše přizpůsobit odmítnout