103 of 313 menu

Lastnost mask

Lastnost mask je okrajšava za vse lastnosti maskiranja in omogoča nastavitev: slike-maske, njenega položaja, velikosti, načina mešanja in drugih parametrov.

Je lastnost-okrajšava za naslednje lastnosti: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Sintaksa

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

Vrednosti

Vrednost	Opis
`none`	Onemogoči maskiranje (privzeta vrednost)
`url()`	Pot do slike-maske (SVG, PNG)
`linear-gradient()`	Linearni gradient kot maska
`radial-gradient()`	Radialni gradient kot maska
`position`	Položaj maske (top, center, 50% 50% in drugi)
`size`	Velikost maske (cover, contain, 100px 50px)
`repeat`	Ponavljanje maske (no-repeat, repeat-x, space)
`mode`	Način mešanja (alpha, luminance, match-source)
`composite`	Kompozicija mask (add, subtract, intersect, exclude)

Priprava slik

Imejmo sliko narave, ki jo bomo obrezovali, in SVG sliki srčka in puščice, po katerih bomo izrezovali:

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

:

Primer . Slika-maska

Naložimo masko-srček na našo sliko:

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

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

:

Primer . Položaj maske

Maska-srček v levem zgornjem kotu:

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

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

:

Primer . Položaj maske

Maska-srček v desnem spodnjem kotu:

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

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

:

Primer . Položaj maske

Maska-srček na sredini levo:

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

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

:

Primer . Položaj maske

Maska-srček na sredini:

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

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

:

Primer . Položaj maske

Maska-srček 100px levo in 200px od zgoraj:

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

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

:

Primer . Velikost maske cover

Vrednost cover poveča masko, da v celoti prekrije element, ohranja razmerja. Lahko obreže robove maske, če se razmerja ne ujemajo:

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

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

:

Primer . Velikost maske contain

Vrednost contain pomanjša masko, da se v celoti prilega v element, ohranja razmerja. Lahko pusti prazna področja:

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

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

:

Primer . Velikost maske

Fiksna velikost določa natančne dimenzije maske. Na primer, naredimo masko velikosti 50px:

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

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

:

Primer . Ponavljanje no-repeat

Vrednost no-repeat onemogoči ponavljanje maske. Maska je prikazana samo enkrat na določenem položaju:

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

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

:

Primer . Ponavljanje repeat-x

Vrednost repeat-x ponavlja masko samo po vodoravni osi:

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

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

:

Primer . Kompozicija add

Vrednost add sešteje več mask (rezultat je združitev vseh mask):

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

:

Primer . Kompozicija intersect

Vrednost intersect prikaže samo območje presečišča mask:

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

:

Primer . Kompozicija exclude

Vrednost exclude prikaže območja mask, ki se ne prekrivajo:

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

:

Primer . Kompozicija subtract

Vrednost subtract odšteje drugo masko od prve. Za primer naredimo en srček in odštejmo od njega puščico:

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

:

Primer . Razširjen zapis mask

Lastnost mask, zapisana z ločenimi sestavnimi deli:

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

:

Primer . SVG za sliko

Uporaba SVG-elementa kot maske za sliko:

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

:

Primer . SVG za gradient

Uporaba SVG-elementa kot maske za 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);
}

:

Glejte tudi

lastnost mask-position,
določa položaj maske glede na element
lastnost mask-image,
nastavi sliko za masko
lastnost mask-mode,
določa kako maska deluje z ozadjem
lastnost mask-size,
določa velikost maske
lastnost mask-repeat,
določa ponavljanje maske
lastnost mask-origin,
določa območje pozicioniranja maske
lastnost mask-clip,
določa območje obrezovanja maske
lastnost mask-composite,
določa kako se več mask kombinira

↑

Slovenščina▼

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

Za delovanje spletnega mesta, analitiko in personalizacijo uporabljamo piškotke. Obdelava podatkov poteka v skladu s Politiko zasebnosti.

sprejmi vse nastavi zavrni