АКЦЫЯ: бясплатныя месячныя курсы па стварэнні сайтаў
на выбар: вёрстка, JavaScript, PHP, Python або фрэймворкі. Сёння апошні дзень для запісу! Націскай!

103 of 313 menu

Уласцівасць mask

Уласцівасць mask з'яўляецца скарачэннем для ўсіх уласцівасцяў маскіравання і дазваляе задаць: відарыс-маску, яе становішча, памер, рэжым змяшчэння і іншыя параметры.

З'яўляецца ўласцівасцю-скарачэннем для наступных уласцівасцяў: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Сінтаксіс

селектар {
	mask: [mask-image] [mask-position] / [mask-size]
	      [mask-repeat] [mask-origin] [mask-clip]
	      [mask-mode] [mask-composite];
}

Значэнні

Значэнне	Апісанне
`none`	Адключае маскіраванне (значэнне па змаўчанні)
`url()`	Шлях да відарысу-маскі (SVG, PNG)
`linear-gradient()`	Лінейны градыент у якасці маскі
`radial-gradient()`	Радыяльны градыент у якасці маскі
`position`	Становішча маскі (top, center, 50% 50% і інш.)
`size`	Памер маскі (cover, contain, 100px 50px)
`repeat`	Паўтарэнне маскі (no-repeat, repeat-x, space)
`mode`	Рэжым змяшчэння (alpha, luminance, match-source)
`composite`	Кампазіцыя масак (add, subtract, intersect, exclude)

Падрыхтоўка карцінак

Хай у нас ёсць карцінка прыроды, якую мы будзем абразьць, і SVG карцінак сэрэечка і стрэлкі, па якіх мы будзем выразаць:

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

:

Прыклад . Маска-карцінка

Давайце наложым маску-сэрэечка на нашу карцінку:

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

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

:

Прыклад . Пазіцыя маскі

Маска-сэрэечка ў левым верхнім куце:

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

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

:

Прыклад . Пазіцыя маскі

Маска-сэрэечка ў правым ніжнім куце:

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

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

:

Прыклад . Пазіцыя маскі

Маска-сэрэечка ў па цэнтры злева:

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

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

:

Прыклад . Пазіцыя маскі

Маска-сэрэечка ў па цэнтры:

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

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

:

Прыклад . Пазіцыя маскі

Маска-сэрэечка 100px злева і 200px зверху:

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

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

:

Прыклад . Памер маскі cover

Значэнне cover маштабуе маску, каб яна цалкам пакрыла элемент, захоўваючы прапорцыі. Можа абразаць краі маскі, калі прапорцыі не супадаюць:

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

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

:

Прыклад . Памер маскі contain

Значэнне contain маштабуе маску, каб яна цалкам змясцілася ў элемент, захоўваючы прапорцыі. Можа пакідаць пустыя вобласці:

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

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

:

Прыклад . Памер маскі

Фіксаваны памер устанаўлівае дакладныя памеры маскі. Напрыклад зробім маску памерам 50px:

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

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

:

Прыклад . Паўтарэнне no-repeat

Значэнне no-repeat адключае паўтарэнне маскі. Маска адлюстроўваецца толькі адзін раз у паказанай пазіцыі:

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

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

:

Прыклад . Паўтарэнне repeat-x

Значэнне repeat-x паўтарае маску толькі па гарызантальнай восі:

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

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

:

Прыклад . Кампазіцыя add

Значэнне add складае некалькі масак (вынік - аб'яднанне ўсіх масак):

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

:

Прыклад . Кампазіцыя intersect

Значэнне intersect паказвае толькі вобласць перасячэння масак:

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

:

Прыклад . Кампазіцыя exclude

Значэнне exclude паказвае вобласці масак, якія не перасякаюцца:

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

:

Прыклад . Кампазіцыя subtract

Значэнне subtract адымае другую маску з першай. Для прыкладу зробім адно сэрэечка і аднімем з яго стрэлку:

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

:

Прыклад . Разгорнуты запіс mask

Уласцівасць mask, запісаная асобнымі складнікамі:

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

:

Прыклад . SVG для карцінкі

Выкарыстанне SVG-элемента ў якасці маскі для карцінкі:

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

:

Прыклад . SVG для градыенту

Выкарыстанне SVG-элемента ў якасці маскі для градыенту:

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

:

Глядзіце таксама

уласцівасць mask-position,
вызначае становішча маскі адносна элемента
уласцівасць mask-image,
задае відарыс для маскі
уласцівасць mask-mode,
вызначае як маска ўзаемадзейнічае з фонам
уласцівасць mask-size,
вызначае памер маскі
уласцівасць mask-repeat,
вызначае паўтарэнне маскі
уласцівасць mask-origin,
вызначае вобласць пазіцыянавання маскі
уласцівасць mask-clip,
вызначае вобласць адсячэння маскі
уласцівасць mask-composite,
вызначае як некалькі масак камбінуюцца

↑