Хосияти 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,
mақоми маскаро нисбат ба унсур муайян мекунад
хосияти mask-size,
андозаи маскаро муайян мекунад
хосияти mask-repeat,
такрори маскаро муайян мекунад
хосияти mask-mode,
муносибати маскаро бо замина муайян мекунад
хосияти mask,
ихтисора барои ҳамаи хосиятҳои маска кардан