103 of 313 menu

Egenskaben mask

Egenskaben mask er en forkortelse for alle maskeringsegenskaber og gør det muligt at indstille: maskebillede, dets position, størrelse, blandingstilstand og andre parametre.

Er en forkortet egenskab for følgende egenskaber: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Syntaks

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

Værdier

Værdi	Beskrivelse
`none`	Deaktiverer maskering (standardværdi)
`url()`	Sti til maskebillede (SVG, PNG)
`linear-gradient()`	Lineær gradient som maske
`radial-gradient()`	Radial gradient som maske
`position`	Maskens position (top, center, 50% 50% osv.)
`size`	Maskens størrelse (cover, contain, 100px 50px)
`repeat`	Gentagelse af maske (no-repeat, repeat-x, space)
`mode`	Blandingstilstand (alpha, luminance, match-source)
`composite`	Komposition af masker (add, subtract, intersect, exclude)

Forberedelse af billeder

Lad os sige, at vi har et naturbillede, som vi vil beskære, og SVG-billeder af et hjerte og en pil, som vi vil klippe ud efter:

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

:

Eksempel . Billedmaske

Lad os påføre en hjerteformet maske på vores billede:

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

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

:

Eksempel . Maskens position

Hjerteformet maske i øverste venstre hjørne:

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

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

:

Eksempel . Maskens position

Hjerteformet maske i nederste højre hjørne:

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

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

:

Eksempel . Maskens position

Hjerteformet maske i midten til venstre:

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

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

:

Eksempel . Maskens position

Hjerteformet maske i midten:

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

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

:

Eksempel . Maskens position

Hjerteformet maske 100px fra venstre og 200px fra toppen:

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

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

:

Eksempel . Maskens størrelse cover

Værdien cover skalerer masken, så den dækker elementet fuldstændigt, og bevarer proportionerne. Kan beskære kanterne på masken, hvis proportionerne ikke matcher:

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

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

:

Eksempel . Maskens størrelse contain

Værdien contain skalerer masken, så den helt passer ind i elementet, og bevarer proportionerne. Kan efterlade tomme områder:

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

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

:

Eksempel . Maskens størrelse

Fast størrelse indstiller maskens nøjagtige dimensioner. For eksempel, lad os lave en maske på 50px:

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

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

:

Eksempel . Gentagelse no-repeat

Værdien no-repeat deaktiverer gentagelse af masken. Masken vises kun én gang på den angivne position:

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

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

:

Eksempel . Gentagelse repeat-x

Værdien repeat-x gentager masken kun langs den vandrette akse:

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

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

:

Eksempel . Komposition add

Værdien add adderer flere masker (resultatet er en forening af alle masker):

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

:

Eksempel . Komposition intersect

Værdien intersect viser kun området hvor maskerne overlapper:

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

:

Eksempel . Komposition exclude

Værdien exclude viser de områder af maskerne, som ikke overlapper:

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

:

Eksempel . Komposition subtract

Værdien subtract trækker den anden maske fra den første. Lad os for eksempel lave et hjerte og trække pilen fra det:

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

:

Eksempel . Udvidet notation af mask

Egenskaben mask, skrevet med dens enkelte komponenter:

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

:

Eksempel . SVG for billede

Brug af SVG-element som maske for et billede:

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

:

Eksempel . SVG for gradient

Brug af SVG-element som maske for en gradient:

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

:

Se også

egenskaben mask-position,
definerer maskens position i forhold til elementet
egenskaben mask-image,
angiver billedet for masken
egenskaben mask-mode,
definerer hvordan masken interagerer med baggrunden
egenskaben mask-size,
definerer maskens størrelse
egenskaben mask-repeat,
definerer gentagelse af masken
egenskaben mask-origin,
definerer området for positionering af masken
egenskaben mask-clip,
definerer udklipningsområdet for masken
egenskaben mask-composite,
definerer hvordan flere masker kombineres

↑

Dansk▼

Afrikaans Azərbaycan Български বাংলা Беларуская Čeština 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 Türkçe Ўзбек Oʻzbek Tiếng Việt

Vi bruger cookies til webstedets funktion, analyse og personalisering. Behandling af data foregår i henhold til Fortrolighedspolitikken.

accepter alle tilpas afvis