103 of 313 menu

mask Özelliği

mask özelliği, tüm maskeleme özellikleri için bir kısaltmadır ve şunları belirlemenize izin verir: mask görseli, konumu, boyutu, karıştırma modu ve diğer parametreler.

Aşağıdaki özellikler için bir kısaltma özelliğidir: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Sözdizimi

seçici {
	mask: [mask-image] [mask-position] / [mask-size]
	      [mask-repeat] [mask-origin] [mask-clip]
	      [mask-mode] [mask-composite];
}

Değerler

Değer	Açıklama
`none`	Maskelemeyi devre dışı bırakır (varsayılan değer)
`url()`	Maske görseline giden yol (SVG, PNG)
`linear-gradient()`	Maske olarak doğrusal gradyan
`radial-gradient()`	Maske olarak radyal gradyan
`position`	Maskenin konumu (top, center, %50 %50 vb.)
`size`	Maskenin boyutu (cover, contain, 100px 50px)
`repeat`	Maskenin tekrarı (no-repeat, repeat-x, space)
`mode`	Karıştırma modu (alpha, luminance, match-source)
`composite`	Maskelerin kompozisyonu (add, subtract, intersect, exclude)

Görsellerin Hazırlanması

Keseceğimiz bir doğa resmimiz ve kesme işlemi yapacağımız kalp ve ok SVG görsellerimiz olsun:

<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">

:

Örnek . Resim Maskesi

Resmimizin üzerine bir kalp maskesi uygulayalım:

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

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

:

Örnek . Maskenin Konumu

Sol üst köşede kalp maskesi:

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

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

:

Örnek . Maskenin Konumu

Sağ alt köşede kalp maskesi:

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

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

:

Örnek . Maskenin Konumu

Solda ortada kalp maskesi:

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

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

:

Örnek . Maskenin Konumu

Ortada kalp maskesi:

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

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

:

Örnek . Maskenin Konumu

100px soldan ve 200px üstten kalp maskesi:

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

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

:

Örnek . Maskenin Boyutu cover

cover değeri, maskeyi oranları koruyarak elementi tamamen kaplayacak şekilde ölçeklendirir. Oranlar uyuşmazsa maskenin kenarlarını kırpabilir:

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

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/cover;
}

:

Örnek . Maskenin Boyutu contain

contain değeri, maskeyi oranları koruyarak elementin içine sığacak şekilde ölçeklendirir. Boş alanlar bırakabilir:

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

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

:

Örnek . Maskenin Boyutu

Sabit bir boyut, maskenin kesin boyutlarını ayarlar. Örneğin, 50px boyutunda bir maske yapalım:

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

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

:

Örnek . Tekrar no-repeat

no-repeat değeri maskenin tekrarını devre dışı bırakır. Maske yalnızca belirtilen konumda bir kez görüntülenir:

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

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

:

Örnek . Tekrar repeat-x

repeat-x değeri maskeyi yalnızca yatay eksende tekrarlar:

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

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left center / 50px repeat-x;
}

:

Örnek . Kompozisyon add

add değeri birden fazla maskeyi toplar (sonuç - tüm maskelerin birleşimi):

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

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

:

Örnek . Kompozisyon intersect

intersect değeri yalnızca maskelerin kesişim alanını gösterir:

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

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

:

Örnek . Kompozisyon exclude

exclude değeri, kesişmeyen maske alanlarını gösterir:

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

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

:

Örnek . Kompozisyon subtract

subtract değeri ikinci maskeyi birinciden çıkarır. Örnek olarak bir kalp yapalım ve ondan bir ok çıkaralım:

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

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 250px no-repeat,
		url("arrow.svg") 170px 80px / 120px no-repeat;
		
		
	mask-composite: subtract;
}

:

Örnek . Genişletilmiş mask Yazımı

mask özelliği, ayrı bileşenlerle yazılmış hali:

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

#image {
	width: 500px;
	height: 281px;
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-origin: content-box;
	mask-clip: content-box;
	mask-mode: alpha;
	mask-composite: add;
}

:

Örnek . Resim için SVG

Bir resim için maske olarak SVG elementi kullanı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;
	background: red;
	mask: url(#mask);
}

:

Örnek . Gradyan için SVG

Bir gradyan için maske olarak SVG elementi kullanımı:

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

#elem {
	width: 500px;
	height: 300px;
	background: linear-gradient(45deg, red, blue);
	mask: url(#star-mask);
}

:

Ayrıca Bakınız

mask-position özelliği,
maskenin elemente göre konumunu belirler
mask-image özelliği,
mask için görseli belirler
mask-mode özelliği,
maskenin arka planla nasıl etkileşime girdiğini belirler
mask-size özelliği,
maskenin boyutunu belirler
mask-repeat özelliği,
maskenin tekrarını belirler
mask-origin özelliği,
maskenin konumlandırma alanını belirler
mask-clip özelliği,
maskenin kırpma alanını belirler
mask-composite özelliği,
birden fazla maskenin nasıl birleştirildiğini belirler

↑

Türkçe▼

Afrikaans Azərbaycan Български বাংলা Беларуская Čeština Dansk Deutsch Ελληνικά English Español Eesti Suomi Français हिन्दी Magyar Հայերեն Indonesia Italiano 日本語 ქართული Қазақ 한국어 Кыргызча Lietuvių Latviešu Македонски Melayu မြန်မာ Nederlands Norsk Polski Português Română Русский සිංහල Slovenčina Slovenščina Shqip Српски Srpski Svenska Kiswahili Тоҷикӣ ไทย Türkmen Ўзбек Oʻzbek Tiếng Việt

Web sitesinin çalışması, analiz ve kişiselleştirme için çerezleri kullanıyoruz. Veri işleme, Gizlilik Politikası'na uygun olarak gerçekleşir.

tümünü kabul et özelleştir reddet