mask-image қасиеті

mask-image қасиеті элемент үшін маска ретінде пайдаланылатын суретті орнатуға мүмкіндік береді. Маска элементтің қай бөліктері көрінетінін, ал қай бөліктері жасырылатынын анықтайды. Маска ретінде SVG, PNG суреттерін немесе градиенттерді пайдалануға болады.

Синтаксис

селектор {
	mask-image: none | <image> | <url>;
}

Мәндері

Мәні	Сипаттама
`none`	Маскалауды сөндіреді (әдепкі мән).
`url()`	Маска-суретке жол (SVG, PNG).
`linear-gradient()`	Маска ретіндегі сызықтық градиент.
`radial-gradient()`	Маска ретіндегі радиалды градиент.

Мысал . SVG-ді маска ретінде пайдалану

Суретке маска ретінде SVG-жүрек суретін қолданайық:

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

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

Мысал . Градиентті маска ретінде пайдалану

Элемент үшін маска ретінде сызықтық градиентті қолданайық:

<div id="elem"></div>

#elem {
	width: 500px;
	height: 300px;
	background: linear-gradient(45deg, red, blue);
	mask-image: linear-gradient(to right, transparent, black);
}

Мысал . SVG-элементін маска ретінде пайдалану

SVG-элементінің көмегімен маска жасап, оны суретке қолданайық:

<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;
	mask-image: url(#mask);
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
}

Сондай-ақ қараңыз

mask-position қасиеті,
масканың элементке қатысты орнын анықтайды
mask-size қасиеті,
масканың өлшемін анықтайды
mask-repeat қасиеті,
масканың қайталануын анықтайды
mask-mode қасиеті,
масканың фонмен қалай өзара әрекеттесетінін анықтайды
mask қасиеті,
маскалаудың барлық қасиеттерінің қысқартуы