103 of 313 menu

Proprietatea mask

Proprietatea mask este o prescurtare pentru toate proprietățile de mascare și permite setarea: unei imagini-mască, poziției acesteia, dimensiunii, modului de amestec și a altor parametri.

Este o proprietate-prescurtare pentru următoarele proprietăți: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Sintaxă

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

Valori

Valoare	Descriere
`none`	Dezactivează mascarea (valoarea implicită)
`url()`	Calea către imaginea-mască (SVG, PNG)
`linear-gradient()`	Gradient linear ca mască
`radial-gradient()`	Gradient radial ca mască
`position`	Poziția măștii (top, center, 50% 50% etc.)
`size`	Dimensiunea măștii (cover, contain, 100px 50px)
`repeat`	Repetarea măștii (no-repeat, repeat-x, space)
`mode`	Modul de amestec (alpha, luminance, match-source)
`composite`	Compunerea măștilor (add, subtract, intersect, exclude)

Pregătirea imaginilor

Să presupunem că avem o imagine cu natură pe care o vom decupa și imagini SVG cu o inimioară și o săgeată, după care vom decupa:

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

:

Exemplu . Mască-imagine

Să aplicăm masca-inimioară pe imaginea noastră:

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

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

:

Exemplu . Poziția măștii

Masca-inimioară în colțul din stânga sus:

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

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

:

Exemplu . Poziția măștii

Masca-inimioară în colțul din dreapta jos:

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

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

:

Exemplu . Poziția măștii

Masca-inimioară în centru spre stânga:

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

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

:

Exemplu . Poziția măștii

Masca-inimioară în centru:

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

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

:

Exemplu . Poziția măștii

Masca-inimioară la 100px din stânga și 200px de sus:

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

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

:

Exemplu . Dimensiunea măștii cover

Valoarea cover scalează masca astfel încât să acopere complet elementul, păstrând proporțiile. Poate decupa marginile măștii dacă proporțiile nu coincid:

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

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

:

Exemplu . Dimensiunea măștii contain

Valoarea contain scalează masca astfel încât să încapă în întregime în element, păstrând proporțiile. Poate lăsa zone goale:

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

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

:

Exemplu . Dimensiunea măștii

Dimensiunea fixă stabilește dimensiunile exacte ale măștii. de exemplu, să facem masca cu dimensiunea de 50px:

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

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

:

Exemplu . Repetarea no-repeat

Valoarea no-repeat dezactivează repetarea măștii. Masca este afișată o singură dată în poziția indicată:

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

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

:

Exemplu . Repetarea repeat-x

Valoarea repeat-x repetă masca doar pe axa orizontală:

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

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

:

Exemplu . Compunerea add

Valoarea add adună mai multe măști (rezultatul - uniunea tuturor măștilor):

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

:

Exemplu . Compunerea intersect

Valoarea intersect arată doar zona de intersecție a măștilor:

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

:

Exemplu . Compunerea exclude

Valoarea exclude arată zonele măștilor care nu se intersectează:

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

:

Exemplu . Compunerea subtract

Valoarea subtract scade a doua mască din prima. De exemplu, să facem o inimioară și să scădem din ea săgeata:

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

:

Exemplu . Scrierea extinsă a lui mask

Proprietatea mask, scrisă cu componente separate:

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

:

Exemplu . SVG pentru imagine

Utilizarea unui element SVG ca mască pentru imagine:

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

:

Exemplu . SVG pentru gradient

Utilizarea unui element SVG ca mască pentru 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);
}

:

Vezi și

proprietatea mask-position,
definește poziția măștii relativ la element
proprietatea mask-image,
setează imaginea pentru mască
proprietatea mask-mode,
definește cum masca interacționează cu fundalul
proprietatea mask-size,
definește dimensiunea măștii
proprietatea mask-repeat,
definește repetarea măștii
proprietatea mask-origin,
definește zona de poziționare a măștii
proprietatea mask-clip,
definește zona de decupare a măștii
proprietatea mask-composite,
definește cum se combină mai multe măști

↑