Kipengele cha mask-image

Kipengele mask-image kinakuwezesha kuweka picha ambayo itatumika kama kifuniko cha kipengele. Kifuniko huamua sehemu gani za kipengele zitaonekana na zipi zitafichika. Kama kifuniko, unaweza kutumia picha za SVG, PNG au mikunjo ya rangi.

Syntax

kichaguli {
	mask-image: none | <picha> | <url>;
}

Thamani

Thamani	Maelezo
`none`	Inazima kufunika (thamani chaguomsingi).
`url()`	Njia ya picha ya kifuniko (SVG, PNG).
`linear-gradient()`	Mkunjio wa mstari kama kifuniko.
`radial-gradient()`	Mkunjio wa miondoko kama kifuniko.

Mfano . Kutumia SVG kama Kifuniko

Weka picha ya SVG ya moyo kama kifuniko juu ya picha:

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

#picha {
	upana: 500px;
	urefu: 281px;
	mask-image: url("heart.svg");
	mask-position: katikati;
	mask-size: 300px;
	mask-repeat: hakuna kurudia;
}

Mfano . Kutumia Mkunjio kama Kifuniko

Tumia mkunjio wa mstari kama kifuniko cha kipengele:

<div id="kipengele"></div>

#kipengele {
	upana: 500px;
	urefu: 300px;
	background: linear-gradient(45deg, nyekundu, bluu);
	mask-image: linear-gradient(kwa kulia, uwazi, nyeusi);
}

Mfano . Kutumia Kipengele cha SVG kama Kifuniko

Unda kifuniko kwa kutumia kipengele cha SVG na uitumie kwenye picha:

<img id="picha" src="image.jpg">
<svg width="0" height="0">
	<mask id="kifuniko">
		<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
	</mask>
</svg>

#picha {
	upana: 500px;
	urefu: 281px;
	mask-image: url(#kifuniko);
	mask-position: katikati;
	mask-size: contain;
	mask-repeat: hakuna kurudia;
}

Angalia Pia

kipengele mask-position,
kinaelezea msimamo wa kifuniko jamaa na kipengele
kipengele mask-size,
kinaelezea ukubwa wa kifuniko
kipengele mask-repeat,
kinaelezea kurudiwa kwa kifuniko
kipengele mask-mode,
kinaelezea jinsi kifuniko kinavyoshirikiana na usuli wa nyuma
kipengele mask,
ufupisho wa mali zote za kufunika