mask-image Özelliği

mask-image özelliği, bir öğe için maske olarak kullanılacak görüntüyü ayarlamanıza olanak tanır. Maske, bir öğenin hangi kısımlarının görünür, hangilerinin gizli olacağını belirler. Maske olarak SVG, PNG görüntüleri veya gradientler kullanılabilir.

Sözdizimi

seçici {
	mask-image: none | <image> | <url>;
}

Değerler

Değer	Açıklama
`none`	Maskelemeyi devre dışı bırakır (varsayılan değer).
`url()`	Maske görüntüsünün yolu (SVG, PNG).
`linear-gradient()`	Maske olarak doğrusal gradient.
`radial-gradient()`	Maske olarak radyal gradient.

Örnek . Maske Olarak SVG Kullanımı

Bir resmin üzerine maske olarak SVG kalp görüntüsü uygulayalım:

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

Örnek . Maske Olarak Gradient Kullanımı

Bir öğe için maske olarak doğrusal gradient uygulayalım:

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

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

Örnek . Maske Olarak SVG Öğesi Kullanımı

Bir SVG öğesi kullanarak maske oluşturalım ve bunu bir resme uygulayalım:

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

Ayrıca Bakınız

mask-position özelliği,
masenin öğeye göre konumunu belirler
mask-size özelliği,
masenin boyutunu belirler
mask-repeat özelliği,
masenin tekrarını belirler
mask-mode özelliği,
masenin arka planla nasıl etkileşime girdiğini belirler
mask özelliği,
tüm maskeleme özellikleri için kısa yazım