103 of 313 menu

Svojstvo mask

Svojstvo mask je skraćenica za sva svojstva maskiranja i omogućava zadavanje: slike-maske, njenog položaja, veličine, režima mešanja i drugih parametara.

Je svojstvo-skraćenica za sledeća svojstva: 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`	Isključuje maskiranje (podrazumevana vrednost)
`url()`	Putanja do slike-maske (SVG, PNG)
`linear-gradient()`	Linearni gradijent kao maska
`radial-gradient()`	Radijalni gradijent kao maska
`position`	Položaj maske (top, center, 50% 50% i dr.)
`size`	Veličina maske (cover, contain, 100px 50px)
`repeat`	Ponavljanje maske (no-repeat, repeat-x, space)
`mode`	Režim mešanja (alpha, luminance, match-source)
`composite`	Kompozicija maski (add, subtract, intersect, exclude)

Priprema slika

Neka imamo sliku prirode koju ćemo obrezivati, i SVG slike srca i strelice, po kojima ćemo izrezivati:

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

:

Primer . Slika-maska

Hajde da preklopimo masku-srce na našu sliku:

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

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

:

Primer . Pozicija maske

Maska-srce u gornjem levom uglu:

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

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

:

Primer . Pozicija maske

Maska-srce u donjem desnom uglu:

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

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

:

Primer . Pozicija maske

Maska-srce po centru levo:

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

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

:

Primer . Pozicija maske

Maska-srce po centru:

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

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

:

Primer . Pozicija maske

Maska-srce 100px levo i 200px odozgo:

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

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

:

Primer . Veličina maske cover

Vrednost cover skalira masku tako da u potpunosti prekrije element, čuvajući proporcije. Može odrezati ivice maske ako se proporcije ne poklapaju:

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

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

:

Primer . Veličina maske contain

Vrednost contain skalira masku tako da u celosti stane u element, čuvajući proporcije. Može ostaviti prazne oblasti:

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

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

:

Primer . Veličina maske

Fiksna veličina postavlja tačne dimenzije maske. Na primer, napravimo masku veličine 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 isključuje ponavljanje maske. Maska se prikazuje samo jednom na naznačenoj poziciji:

<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 masku samo po horizontalnoj 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 sabira nekoliko maski (rezultat - unija svih maski):

<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 pokazuje samo oblast preseka maski:

<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 pokazuje oblasti maski koje se ne presecaju:

<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 oduzima drugu masku od prve. Za primer napravimo jedno srce i od njega oduzmimo strelicu:

<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 . Razvijeni zapis mask

Svojstvo mask, zapisano pojedinačnim sastavnicama:

<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 sliku

Korišćenje SVG elementa kao maske za sliku:

<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 gradijent

Korišćenje SVG elementa kao maske za gradijent:

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

:

Pogledajte takođe

svojstvo mask-position,
određuje položaj maske u odnosu na element
svojstvo mask-image,
postavlja sliku za masku
svojstvo mask-mode,
određuje kako maska deluje sa pozadinom
svojstvo mask-size,
određuje veličinu maske
svojstvo mask-repeat,
određuje ponavljanje maske
svojstvo mask-origin,
određuje oblast pozicioniranja maske
svojstvo mask-clip,
određuje oblast odsecanja maske
svojstvo mask-composite,
određuje kako se više maski kombinuje

↑

Srpski▼

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

Koristimo kolačiće za rad sajta, analitiku i personalizaciju. Obrada podataka se vrši u skladu sa Politikom privatnosti.

prihvati sve podesi odbij