Xüsusiyyət mask-mode

mask-mode xüsusiyyəti maskanın elementin fonu ilə qarşılıqlı əlaqəsinin üsulunu təyin edir. O, maskanın alfa kanalı (şəffaflıq) və ya maska şəklinin parlaqlıq dəyərlərindən (luminance) istifadə edib-etməyəcəyini müəyyən edir.

Sintaksis

selektor {
	mask-mode: alpha | luminance | match-source;
}

Dəyərlər

Dəyər	Təsvir
`alpha`	Maska yalnız şəklin alfa kanalından (şəffaflıq) istifadə edir.
`luminance`	Maska şəklin parlaqlıq dəyərlərindən istifadə edir (ağ = görünən, qara = şəffaf).
`match-source`	Şəkillər üçün alfa kanalından, SVG üçün luminance dəyərindən istifadə edir (standart dəyər).

Nümunə . Alpha rejimi

Alpha rejimində SVG maskasının tətbiqi:

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

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/150px no-repeat;
	mask-mode: alpha;
}

Nümunə . Luminance rejimi

Luminance rejimində SVG maskasının tətbiqi:

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

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/150px no-repeat;
	mask-mode: luminance;
}

Nümunə . SVG maskası match-source rejimi ilə

SVG üçün standart dəyərin (match-source) istifadəsi:

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

#image {
	width: 500px;
	height: 281px;
	mask: url(#svg-mask);
	mask-mode: match-source;
}

Nümunə . Müxtəlif rejimlərlə kompozisiya

Müxtəlif qarışıq rejimləri olan maskaların birləşdirilməsi:

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

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat alpha,
		url("arrow.svg") 200px 30px / 150px no-repeat luminance;
	mask-composite: add;
}

Həmçinin bax

mask-image xüsusiyyəti,
maska üçün şəkil təyin edir
mask-composite xüsusiyyəti,
bir neçə maskanın qarşılıqlı əlaqəsini müəyyən edir
mask xüsusiyyəti,
maskalama ilə bağlı bütün xüsusiyyətlər üçün qısa yazılış