103 of 313 menu

Egenskapen mask

Egenskapen mask er en forkortelse for alle maskeringsegenskaper og lar deg angi: et bilde som maske, dens posisjon, størrelse, blandingsmodus og andre parametere.

Er en sammentrekkende egenskap for følgende egenskaper: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Syntaks

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

Verdier

Verdi	Beskrivelse
`none`	Deaktiverer maskering (standardverdi)
`url()`	Bane til bilde-maske (SVG, PNG)
`linear-gradient()`	Lineær gradient som maske
`radial-gradient()`	Radial gradient som maske
`position`	Maskens posisjon (top, center, 50% 50% osv.)
`size`	Maskens størrelse (cover, contain, 100px 50px)
`repeat`	Gjentakelse av maske (no-repeat, repeat-x, space)
`mode`	Blandingsmodus (alpha, luminance, match-source)
`composite`	Komposisjon av masker (add, subtract, intersect, exclude)

Forberedelse av bilder

La oss si at vi har et naturbilde som vi skal beskjære, og SVG-bilder av et hjerte og en pil, som vi skal klippe ut etter:

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

:

Eksempel . Bilde-maske

La oss legge en hjerte-maske på bildet vårt:

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

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

:

Eksempel . Maskens posisjon

Hjerte-masken i øvre 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 posisjon

Hjerte-masken i nedre høyre hjørne:

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

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

:

Eksempel . Maskens posisjon

Hjerte-masken sentrert til venstre:

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

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

:

Eksempel . Maskens posisjon

Hjerte-masken sentrert:

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

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

:

Eksempel . Maskens posisjon

Hjerte-masken 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

Verdien cover skalerer masken slik at den dekker elementet fullstendig, og opprettholder proporsjonene. Kan beskjære kantene på masken hvis proporsjonene ikke stemmer overens:

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

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

:

Eksempel . Maskens størrelse contain

Verdien contain skalerer masken slik at den hele passer inn i elementet, og opprettholder proporsjonene. Kan etterlate 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 setter de nøyaktige dimensjonene til masken. For eksempel, la oss lage en maske på 50px:

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

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

:

Eksempel . Gjentakelse no-repeat

Verdien no-repeat deaktiverer gjentakelse av masken. Masken vises bare én gang i den angitte posisjonen:

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

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

:

Eksempel . Gjentakelse repeat-x

Verdien repeat-x gjentar masken bare langs den horisontale aksen:

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

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

:

Eksempel . Komposisjon add

Verdien add legger sammen flere masker (resultatet er en union av 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 . Komposisjon intersect

Verdien intersect viser bare området der maskene krysser hverandre:

<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 . Komposisjon exclude

Verdien exclude viser områdene av maskene som ikke krysser hverandre:

<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 . Komposisjon subtract

Verdien subtract trekker den andre masken fra den første. La oss for eksempel lage ett hjerte og trekke fra det en pil:

<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 . Utvidet skrivemåte for mask

Egenskapen mask, skrevet med separate 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 bilde

Bruk av SVG-element som maske for bilde:

<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

Bruk av SVG-element som maske for 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å

egenskapen mask-position,
definerer maskens posisjon i forhold til elementet
egenskapen mask-image,
angir bildet for masken
egenskapen mask-mode,
definerer hvordan masken samhandler med bakgrunnen
egenskapen mask-size,
definerer maskens størrelse
egenskapen mask-repeat,
definerer gjentakelse av masken
egenskapen mask-origin,
definerer området for posisjonering av masken
egenskapen mask-clip,
definerer klippeområdet for masken
egenskapen mask-composite,
definerer hvordan flere masker kombineres

↑

Norsk▼

Afrikaans Azərbaycan Български বাংলা Беларуская Čeština Dansk Deutsch Ελληνικά English Español Eesti Suomi Français हिन्दी Magyar Հայերեն Indonesia Italiano 日本語 ქართული Қазақ 한국어 Кыргызча Lietuvių Latviešu Македонски Melayu မြန်မာ Nederlands 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 bruker informasjonskapsler for nettstedets funksjonalitet, analyse og personalisering. Behandling av data foregår i henhold til Personvernerklæringen.

godta alle tilpass avvis