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

Ние користиме колачиња за работата на веб-страната, анализа и персонализација. Обработката на податоци се врши во согласност со Политиката за приватност.

прифати ги сите прилагоди одбиј