Xüsusiyyət mask-image

mask-image xüsusiyyəti element üçün mask kimi istifadə olunacaq şəkli təyin etməyə imkan verir. Mask elementin hansı hissələrinin görünəcəyini, hansılarının isə gizlidiləcəyini müəyyən edir. Mask kimi SVG, PNG şəkilləri və ya qradientlər istifadə oluna bilər.

Sintaksis

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

Qiymətlər

Qiymət	Təsvir
`none`	Maskələməni söndürür (standart qiymət).
`url()`	Mask şəklinin yolu (SVG, PNG).
`linear-gradient()`	Mask kimi xətti qradient.
`radial-gradient()`	Mask kimi radial qradient.

Nümunə . Mask kimi SVG istifadəsi

Şəkilin üzərinə mask kimi SVG ürək şəklini tətbiq edək:

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

Nümunə . Mask kimi qradient istifadəsi

Element üçün mask kimi xətti qradient tətbiq edək:

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

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

Nümunə . Mask kimi SVG elementinin istifadəsi

SVG elementi vasitəsilə mask yaradaq və onu şəkilə tətbiq edək:

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

Həmçinin bax

mask-position xüsusiyyəti,
masksin elementə nisbətən mövqeyini müəyyən edir
mask-size xüsusiyyəti,
masksin ölçüsünü müəyyən edir
mask-repeat xüsusiyyəti,
masksin təkrarını müəyyən edir
mask-mode xüsusiyyəti,
masksin fonla qarşılıqlı əlaqəsini müəyyən edir
mask xüsusiyyəti,
bütün maskələmə xüsusiyyətləri üçün qısaldılmış yazılış