Mask-image xususiyati

mask-image xususiyati element uchun maska sifatida ishlatiladigan tasvirni o'rnatish imkonini beradi. Maska qaysi qismlar ko'rinadigan va qaysi qismlar yashirilishini belgilaydi. Maska sifatida SVG, PNG tasvirlar yoki gradientlardan foydalanish mumkin.

Sintaksis

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

Qiymatlar

Qiymat	Ta'rif
`none`	Maskalashni o'chiradi (standart qiymat).
`url()`	Maska tasviriga yo'l (SVG, PNG).
`linear-gradient()`	Maska sifatida chiziqli gradient.
`radial-gradient()`	Maska sifatida radial gradient.

Misol . Maska sifatida SVG dan foydalanish

Rasmga maska sifatida SVG yordamida yaratilgan yurakcha tasvirini qo'llaymiz:

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

Misol . Maska sifatida gradientdan foydalanish

Element uchun maska sifatida chiziqli gradientni qo'llaymiz:

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

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

Misol . Maska sifatida SVG elementidan foydalanish

SVG elementi yordamida maska yaratamiz va uni rasmga qo'llaymiz:

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

Shuningdek qarang

mask-position xususiyati,
maskaning elementga nisbatan joylashuvini belgilaydi
mask-size xususiyati,
maskaning o'lchamini belgilaydi
mask-repeat xususiyati,
maskaning takrorlanishini belgilaydi
mask-mode xususiyati,
maska fon bilan qanday o'zaro ta'sirlashishini belgilaydi
mask xususiyati,
barcha maskalash xususiyatlari uchun qisqartma