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

Користимо колачиће за рад сајта, аналитику и персонализацију. Обрада података се врши у складу са Политиком приватности.

прихвати све подеси одбиј