103 of 313 menu

A mask tulajdonság

A mask tulajdonság egy rövidítés az összes maszkolási tulajdonságra, és lehetővé teszi: mask-kép megadását, annak pozícióját, méretét, összetételi módját és egyéb paramétereit.

A következő tulajdonságok rövidített formája: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Szintaxis

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

Értékek

Érték	Leírás
`none`	Kikapcsolja a maszkolást (alapértelmezett érték)
`url()`	Az elérési út a mask-képhez (SVG, PNG)
`linear-gradient()`	Lineáris gradien maszkként
`radial-gradient()`	Radialis gradien maszkként
`position`	A maszk pozíciója (top, center, 50% 50% stb.)
`size`	A maszk mérete (cover, contain, 100px 50px)
`repeat`	A maszk ismétlése (no-repeat, repeat-x, space)
`mode`	Összetételi mód (alpha, luminance, match-source)
`composite`	Maskok kompozíciója (add, subtract, intersect, exclude)

Képek előkészítése

Tegyük fel, hogy van egy természet képe, amit meg fogunk vágni, és SVG képek egy szív és egy nyíl formájában, amelyek mentén kivágjuk:

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

:

Példa . Mask-kép

Alkalmazzunk egy szív formájú maszkot a képünkre:

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

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

:

Példa . A maszk pozíciója

Szív maszk a bal felső sarokban:

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

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

:

Példa . A maszk pozíciója

Szív maszk a jobb alsó sarokban:

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

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

:

Példa . A maszk pozíciója

Szív maszk bal oldalon középen:

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

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

:

Példa . A maszk pozíciója

Szív maszk középen:

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

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

:

Példa . A maszk pozíciója

Szív maszk 100px balra és 200px felülről:

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

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

:

Példa . A maszk mérete cover

A cover érték úgy méretezi a maszkot, hogy az teljesen lefedje az elemet, megtartva az arányokat. Levághatja a maszk széleit, ha az arányok nem egyeznek:

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

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

:

Példa . A maszk mérete contain

A contain érték úgy méretezi a maszkot, hogy az teljesen beleférjen az elembe, megtartva az arányokat. Üres területeket hagyhat:

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

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

:

Példa . A maszk mérete

A fix méret pontos méreteket állít be a maszk számára. Például állítsunk be egy 50px méretű maszkot:

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

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

:

Példa . Ismétlés no-repeat

A no-repeat érték kikapcsolja a maszk ismétlését. A maszk csak egyszer jelenik meg a megadott pozícióban:

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

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

:

Példa . Ismétlés repeat-x

A repeat-x érték csak a vízszintes tengely mentén ismétli a maszkot:

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

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

:

Példa . Kompozíció add

A add érték összead több maszkot (az eredmény az összes maszk egyesülése):

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

:

Példa . Kompozíció intersect

A intersect érték csak a maszkok metszetének területét jeleníti meg:

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

:

Példa . Kompozíció exclude

A exclude érték azon maszkterületeket jeleníti meg, amelyek nem metszik egymást:

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

:

Példa . Kompozíció subtract

A subtract érték kivonja a második maszkot az elsőből. Példaként készítsünk egy szívet és vonjuk ki belőle a nyilat:

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

:

Példa . A mask kifejtett formában

A mask tulajdonság különálló összetevőkkel felírva:

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

:

Példa . SVG képhez

SVG elem használata maszkként képhez:

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

:

Példa . SVG gradienhez

SVG elem használata maszkként gradienhez:

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

:

Lásd még

a mask-position tulajdonság,
meghatározza a maszk pozícióját az elemhez képest
a mask-image tulajdonság,
beállítja a mask-képet
a mask-mode tulajdonság,
meghatározza, hogyan lép kölcsönhatásba a maszk a háttérrel
a mask-size tulajdonság,
meghatározza a maszk méretét
a mask-repeat tulajdonság,
meghatározza a maszk ismétlését
a mask-origin tulajdonság,
meghatározza a maszk pozicionálási területét
a mask-clip tulajdonság,
meghatározza a maszk vágási területét
a mask-composite tulajdonság,
meghatározza, hogyan kombinálódik több maszk

↑

Magyar▼

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

A weboldal működéséhez, elemzéshez és személyre szabáshoz sütiket használunk. Az adatfeldolgozás a Adatvédelmi irányelvek szerint történik.

összes elfogadása beállítás elutasítás