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,
определя как няколко маски се комбинират

↑

Български▼

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 Slovenščina Shqip Српски Srpski Svenska Kiswahili Тоҷикӣ ไทย Türkmen Türkçe Ўзбек Oʻzbek Tiếng Việt

Ние използваме бисквитки за работата на сайта, анализ и персонализация. Обработката на данни се извършва в съответствие с Политика за поверителност.

приемам всички настройки отхвърляне