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 касиети,
бардык маскалоо касиеттери үчүн кыскартылган түр