Mask-mode häsiýeti

mask-mode häsiýeti, maskanyň element ýadygy bilen arabaglanyşyk usulyny belgileýär. Bu, maskanyň alfa kanalyny (şeffaflyk) ýa-da ýagtylyk bahalaryny (luminance) ulanýandygy kesgitleýär.

Sintaksis

selektör {
	mask-mode: alpha | luminance | match-source;
}

Bahalar

Baha	Düşündiriş
`alpha`	Maskanyň diňe alfa kanalyny (şeffaflyk) ulanmagy.
`luminance`	Maskanyň ýagtylyk bahalaryny ulanmagy (ak = görnüşli, gara = şeffaf).
`match-source`	Suratlar üçin alfa kanalyny, SVG üçin bolsa luminance bahasyny ulanýar (bellenen baha).

Mysal . Alpha rejimi

SVG-maskanyň alpha rejiminde ulanylyşy:

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

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

Mysal . Luminance rejimi

SVG-maskanyň luminance rejiminde ulanylyşy:

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

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

Mysal . SVG maska match-source rejiminde

SVG üçin bellenen bahanyň (match-source) ulanylyşy:

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

Mysal . Turlu rejimlerde kompozisiýa

Türli düşüş rejimleri bilen maskalaryň birleşdirilmegi:

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

Şeýle hem görüň

mask-image häsiýeti,
maska üçin surat belgileýär
mask-composite häsiýeti,
birnäçe maskanyň arakesmesini kesgitleýär
mask häsiýeti,
maskalama häsiýetleriniň hemmesi üçin gysgaldylan görnüş