103 of 313 menu

Īpašība mask

Īpašība mask ir saīsinājums visām maskēšanas īpašībām un ļauj iestatīt: attēla masku, tās novietojumu, izmēru, sajaukšanas režīmu un citus parametrus.

Ir saīsināta īpašība šādām īpašībām: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Sintakse

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

Vērtības

Vērtība	Apraksts
`none`	Atslēdz maskēšanu (noklusējuma vērtība)
`url()`	Ceļš uz attēla masku (SVG, PNG)
`linear-gradient()`	Lineārs gradients kā maska
`radial-gradient()`	Radiāls gradients kā maska
`position`	Masks novietojums (top, center, 50% 50% u.c.)
`size`	Masks izmērs (cover, contain, 100px 50px)
`repeat`	Masks atkārtošana (no-repeat, repeat-x, space)
`mode`	Sajaukšanas režīms (alpha, luminance, match-source)
`composite`	Masku kompozīcija (add, subtract, intersect, exclude)

Attēlu sagatavošana

Pieņemsim, ka mums ir dabas attēls, kuru mēs apgriezīsim, un SVG sirsniņas un bultas attēli, pēc kuriem mēs izgriezīsim:

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

:

Piemērs . Attēla maska

Uzliksim sirsniņas masku uz mūsu attēla:

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

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

:

Piemērs . Masks pozīcija

Masks-sirsniņa augšējā kreisajā stūrī:

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

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

:

Piemērs . Masks pozīcija

Masks-sirsniņa apakšējā labajā stūrī:

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

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

:

Piemērs . Masks pozīcija

Masks-sirsniņa centrā pa kreisi:

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

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

:

Piemērs . Masks pozīcija

Masks-sirsniņa centrā:

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

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

:

Piemērs . Masks pozīcija

Masks-sirsniņa 100px no kreisās un 200px no augšas:

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

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

:

Piemērs . Masks izmērs cover

Vērtība cover mērogo masku, lai tā pilnībā pārklātu elementu, saglabājot malu proporcijas. Var apgriezt maskas malas, ja proporcijas nesakrīt:

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

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

:

Piemērs . Masks izmērs contain

Vērtība contain mērogo masku, lai tā pilnībā ietilptu elementā, saglabājot malu proporcijas. Var atstāt tukšas zonas:

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

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

:

Piemērs . Masks izmērs

Fiksētais izmērs iestata precīzus maskas izmērus. Piemēram, izveidosim masku ar izmēru 50px:

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

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

:

Piemērs . Atkārtošana no-repeat

Vērtība no-repeat atslēdz maskas atkārtošanu. Maska tiek rādīta tikai vienu reizi norādītajā pozīcijā:

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

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

:

Piemērs . Atkārtošana repeat-x

Vērtība repeat-x atkārto masku tikai pa horizontālo asi:

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

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

:

Piemērs . Kompozīcija add

Vērtība add saskaita vairākas maskas (rezultāts - visu masku apvienojums):

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

:

Piemērs . Kompozīcija intersect

Vērtība intersect rāda tikai masku krustojuma zonu:

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

:

Piemērs . Kompozīcija exclude

Vērtība exclude rāda to masku zonas, kuras nekrustojas:

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

:

Piemērs . Kompozīcija subtract

Vērtība subtract atņem otro masku no pirmās. Piemēram, izveidosim vienu sirsniņu un atņemsim no tās bultu:

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

:

Piemērs . Izvērsts mask ieraksts

Īpašība mask, ierakstīta kā atsevišķas sastāvdaļas:

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

:

Piemērs . SVG attēlam

SVG elementa izmantošana kā masku attēlam:

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

:

Piemērs . SVG gradientam

SVG elementa izmantošana kā masku gradientam:

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

:

Skatiet arī

īpašība mask-position,
nosaka masks pozīciju attiecībā pret elementu
īpašība mask-image,
iestata attēlu maskai
īpašība mask-mode,
norāda, kā maska mijiedarbojas ar fona
īpašība mask-size,
norāda masks izmēru
īpašība mask-repeat,
norāda masks atkārtošanos
īpašība mask-origin,
norāda masks pozicionēšanas apgabalu
īpašība mask-clip,
norāda masks apgriešanas apgabalu
īpašība mask-composite,
norāda, kā vairākas maskas tiek apvienotas

↑

Latviešu▼

Afrikaans Azərbaycan Български বাংলা Беларуская Čeština Dansk Deutsch Ελληνικά English Español Eesti Suomi Français हिन्दी Magyar Հայերեն Indonesia Italiano 日本語 ქართული Қазақ 한국어 Кыргызча Lietuvių Македонски 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

Mēs izmantojam sīkdatnes, lai nodrošinātu vietnes darbību, analīti un personalizāciju. Datu apstrāde notiek saskaņā ar Konfidencialitātes politiku.

pieņemt visus iestatīt noraidīt