103 of 313 menu

Savybė mask

Savybė mask yra sutrumpinimas visoms maskavimo savybėms ir leidžia nustatyti: vaizdą-kaukę, jos padėtį, dydį, maišymo režimą ir kitus parametrus.

Yra sutrumpinta savybė šioms savybėms: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Sintaksė

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

Reikšmės

Reikšmė	Aprašas
`none`	Išjungia maskavimą (numatytoji reikšmė)
`url()`	Kelias į vaizdą-kaukę (SVG, PNG)
`linear-gradient()`	Linijinis gradientas kaip kaukė
`radial-gradient()`	Radialinis gradientas kaip kaukė
`position`	Kaukės padėtis (top, center, 50% 50% ir kt.)
`size`	Kaukės dydis (cover, contain, 100px 50px)
`repeat`	Kaukės kartojimas (no-repeat, repeat-x, space)
`mode`	Maišymo režimas (alpha, luminance, match-source)
`composite`	Kaukių kompozicija (add, subtract, intersect, exclude)

Vaizdų paruošimas

Tarkime, kad turime gamtos vaizdą, kurį apkirsime, ir SVG vaizdus širdelės ir rodyklės, pagal kuriuos išpjaustysime:

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

:

Pavyzdys . Kaukė-vaizdas

Uždėkime širdelės kaukę ant mūsų vaizdo:

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

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

:

Pavyzdys . Kaukės pozicija

Širdelės kaukė viršutiniame kairiajame kampe:

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

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

:

Pavyzdys . Kaukės pozicija

Širdelės kaukė apatiniame dešiniajame kampe:

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

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

:

Pavyzdys . Kaukės pozicija

Širdelės kaukė centre kairėje:

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

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

:

Pavyzdys . Kaukės pozicija

Širdelės kaukė centre:

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

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

:

Pavyzdys . Kaukės pozicija

Širdelės kaukė 100px iš kairės ir 200px iš viršaus:

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

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

:

Pavyzdys . Kaukės dydis cover

Reikšmė cover mastelioja kaukę, kad ji visiškai padengtų elementą, išlaikant proporcijas. Gali nukirpti kaukės kraštus, jei proporcijos nesutampa:

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

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

:

Pavyzdys . Kaukės dydis contain

Reikšmė contain mastelioja kaukę, kad ji visiškai tilptų į elementą, išlaikant proporcijas. Gali palikti tuščias sritis:

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

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

:

Pavyzdys . Kaukės dydis

Fiksuotas dydis nustato tikslius kaukės matmenis. Pavyzdžiui, padarykime kaukę 50px dydžio:

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

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

:

Pavyzdys . Kartojimas no-repeat

Reikšmė no-repeat išjungia kaukės kartojimą. Kaukė rodoma tik vieną kartą nurodytoje pozicijoje:

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

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

:

Pavyzdys . Kartojimas repeat-x

Reikšmė repeat-x kartoją kaukę tik horizontalia ašimi:

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

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

:

Pavyzdys . Kompozicija add

Reikšmė add sudeda kelias kaukes (rezultatas - visų kaukių sąjunga):

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

:

Pavyzdys . Kompozicija intersect

Reikšmė intersect rodo tik kaukių susikirtimo sritį:

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

:

Pavyzdys . Kompozicija exclude

Reikšmė exclude rodo kaukių sritis, kurios nesusikerta:

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

:

Pavyzdys . Kompozicija subtract

Reikšmė subtract atima antrą kaukę iš pirmos. Pavyzdžiui, padarykime vieną širdelę ir atimsime iš jos rodyklę:

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

:

Pavyzdys . Išskleistas mask užrašymas

Savybė mask, užrašyta atskiromis sudėtinėmis dalimis:

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

:

Pavyzdys . SVG vaizdui

SVG elemento naudojimas kaip kaukės vaizdui:

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

:

Pavyzdys . SVG gradientui

SVG elemento naudojimas kaip kaukės gradientui:

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

:

Taip pat žiūrėkite

savybė mask-position,
apibrėžia kaukės padėtį elemento atžvilgiu
savybė mask-image,
nustato vaizdą kaukei
savybė mask-mode,
apibrėžia kaip kaukė sąveikauja su fono
savybė mask-size,
apibrėžia kaukės dydį
savybė mask-repeat,
apibrėžia kaukės kartojimą
savybė mask-origin,
apibrėžia kaukės pozicionavimo sritį
savybė mask-clip,
apibrėžia kaukės apkirpimo sritį
savybė mask-composite,
apibrėžia kaip kelios kaukės kombinuojasi

↑

Lietuvių▼

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

Mes naudojame slapukus svetainės veikimui, analizei ir personalizavimui. Duomenų apdorojimas vyksta pagal Privatumo politiką.

priimti visus nustatyti atšaukti