103 of 313 menu

Egenskapen mask

Egenskapen mask är en sammanfattning för alla maskeringsegenskaper och gör det möjligt att ställa in: maskbild, dess position, storlek, blandningsläge och andra parametrar.

Är en sammanfattande egenskap för följande egenskaper: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Syntax

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

Värden

Värde	Beskrivning
`none`	Stänger av maskering (standardvärde)
`url()`	Sökväg till maskbild (SVG, PNG)
`linear-gradient()`	Linjär gradient som mask
`radial-gradient()`	Radiell gradient som mask
`position`	Maskens position (top, center, 50% 50% osv.)
`size`	Maskens storlek (cover, contain, 100px 50px)
`repeat`	Upprepning av mask (no-repeat, repeat-x, space)
`mode`	Blandningsläge (alpha, luminance, match-source)
`composite`	Maskkomposition (add, subtract, intersect, exclude)

Förbereder bilder

Låt oss säga att vi har en naturbild som vi kommer att beskära, och SVG-bilder av ett hjärta och en pil, som vi kommer att klippa ut efter:

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

:

Exempel . Maskbild

Låt oss applicera en hjärtmask på vår bild:

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

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

:

Exempel . Maskposition

Hjärtmask i övre vänstra hörnet:

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

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

:

Exempel . Maskposition

Hjärtmask i nedre högra hörnet:

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

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

:

Exempel . Maskposition

Hjärtmask i mitten till vänster:

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

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

:

Exempel . Maskposition

Hjärtmask i mitten:

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

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

:

Exempel . Maskposition

Hjärtmask 100px från vänster och 200px från toppen:

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

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

:

Exempel . Maskstorlek cover

Värdet cover skalar masken så att den täcker elementet helt, med bevarande av proportioner. Kan beskära maskens kanter om proportionerna inte stämmer överens:

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

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

:

Exempel . Maskstorlek contain

Värdet contain skalar masken så att den får plats inuti elementet, med bevarande av proportioner. Kan lämna tomma områden:

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

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

:

Exempel . Maskstorlek

En fast storlek sätter maskens exakta dimensioner. Till exempel, låt oss göra en mask med storleken 50px:

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

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

:

Exempel . Upprepning no-repeat

Värdet no-repeat stänger av upprepning av masken. Masken visas bara en gång på angiven position:

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

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

:

Exempel . Upprepning repeat-x

Värdet repeat-x upprepar masken endast längs den horisontella axeln:

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

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

:

Exempel . Komposition add

Värdet add adderar flera masker (resultatet är en union av alla 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;
}

:

Exempel . Komposition intersect

Värdet intersect visar bara området där maskerna överlappar:

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

:

Exempel . Komposition exclude

Värdet exclude visar områden av maskerna som inte överlappar:

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

:

Exempel . Komposition subtract

Värdet subtract subtraherar den andra masken från den första. Som exempel, låt oss skapa ett hjärta och subtrahera pilen från 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;
}

:

Exempel . Utförlig notation för mask

Egenskapen mask, skriven med separata 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;
}

:

Exempel . SVG för bild

Användning av SVG-element som mask för en bild:

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

:

Exempel . SVG för gradient

Användning av SVG-element som mask för 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 även

egenskapen mask-position,
definierar maskens position i förhållande till elementet
egenskapen mask-image,
ställer in bilden för masken
egenskapen mask-mode,
definierar hur masken interagerar med bakgrunden
egenskapen mask-size,
definierar maskens storlek
egenskapen mask-repeat,
definierar upprepning av masken
egenskapen mask-origin,
definierar maskens positioneringsområde
egenskapen mask-clip,
definierar maskens urklippsområde
egenskapen mask-composite,
definierar hur flera masker kombineras

↑

Svenska▼

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 Kiswahili Тоҷикӣ ไทย Türkmen Türkçe Ўзбек Oʻzbek Tiếng Việt

Vi använder kakor för webbplatsens funktion, analys och personalisering. Behandling av data sker i enlighet med Integritetspolicyn.

acceptera alla anpassa avvisa