103 of 313 menu

Mask eienskap

Die eienskap mask is 'n afkorting vir alle maskeringseienskappe en laat toe om te spesifiseer: 'n maskerbeeld, sy posisie, grootte, vermengingsmodus en ander parameters.

Is 'n verkorte eienskap vir die volgende eienskappe: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Sintaksis

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

Waardes

Waarde	Beskrywing
`none`	Skakel maskering af (verstekwaarde)
`url()`	Pad na maskerbeeld (SVG, PNG)
`linear-gradient()`	Lineêre gradiënt as masker
`radial-gradient()`	Radiale gradiënt as masker
`position`	Maskerposisie (top, center, 50% 50%, ens.)
`size`	Maskergrootte (cover, contain, 100px 50px)
`repeat`	Maskerherhaling (no-repeat, repeat-x, space)
`mode`	Vermengingsmodus (alpha, luminance, match-source)
`composite`	Maskersamestelling (add, subtract, intersect, exclude)

Voorbereiding van beelde

Kom ons het 'n natuurbeeld wat ons gaan vorm, en SVG-beelde van 'n hartjie en pyl, waarlangs ons gaan uitsny:

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

:

Voorbeeld . Maskerbeeld

Kom ons lê 'n hartmasker op ons beeld:

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

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

:

Voorbeeld . Maskerposisie

Hartmasker in die linkerbovenhoek:

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

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

:

Voorbeeld . Maskerposisie

Hartmasker in die regteronderhoek:

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

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

:

Voorbeeld . Maskerposisie

Hartmasker in die middel links:

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

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

:

Voorbeeld . Maskerposisie

Hartmasker in die middel:

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

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

:

Voorbeeld . Maskerposisie

Hartmasker 100px van links en 200px van bo:

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

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

:

Voorbeeld . Maskergrootte cover

Die waarde cover skaal die masker sodat dit die element volledig bedek, met behoud van verhoudings. Kan maskerrande sny as verhoudings nie ooreenstem nie:

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

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

:

Voorbeeld . Maskergrootte contain

Die waarde contain skaal die masker sodat dit volledig in die element pas, met behoud van verhoudings. Kan leë areas laat:

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

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

:

Voorbeeld . Maskergrootte

Vaste grootte stel presiese maskergrootte in. Byvoorbeeld, laat ons 'n masker maak met grootte 50px:

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

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

:

Voorbeeld . Herhaling no-repeat

Die waarde no-repeat skakel maskerherhaling af. Die masker word net een keer in die gespesifiseerde posisie vertoon:

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

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

:

Voorbeeld . Herhaling repeat-x

Die waarde repeat-x herhaal die masker net op die horisontale as:

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

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

:

Voorbeeld . Samestelling add

Die waarde add tel verskeie maskers op (resultaat - vereniging van alle maskers):

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

:

Voorbeeld . Samestelling intersect

Die waarde intersect toon net die gebied van maskers kruising:

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

:

Voorbeeld . Samestelling exclude

Die waarde exclude toon die gebiede van maskers wat nie kruis nie:

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

:

Voorbeeld . Samestelling subtract

Die waarde subtract trek die tweede masker van die eerste af. Vir die voorbeeld, laat ons een hartjie maak en die pyl daarvan aftrek:

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

:

Voorbeeld . Uitgebreide mask skryfwyse

Die mask eienskap, geskryf as afsonderlike komponente:

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

:

Voorbeeld . SVG vir beeld

Gebruik van 'n SVG-element as masker vir 'n beeld:

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

:

Voorbeeld . SVG vir gradiënt

Gebruik van 'n SVG-element as masker vir 'n gradiënt:

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

:

Sien ook

eienskap mask-position,
bepaal die posisie van die masker relatief tot die element
eienskap mask-image,
spesifiseer die beeld vir die masker
eienskap mask-mode,
bepaal hoe die masker met die agtergrond interaksie het
eienskap mask-size,
bepaal die grootte van die masker
eienskap mask-repeat,
bepaal die herhaling van die masker
eienskap mask-origin,
bepaal die posisioneringsarea van die masker
eienskap mask-clip,
bepaal die snyarea van die masker
eienskap mask-composite,
bepaal hoe verskeie maskers gekombineer word

↑

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

Ons gebruik koekies vir die werking van die webwerf, ontleding en personalisering. Die verwerking van data geskied volgens die Privaatheidsbeleid.

aanvaar alles instel verwerp