103 of 313 menu

Mask omadus

Omadus mask on lühend kõikidele maskimisomadustele ja võimaldab määrata: maskipildi, selle asukoha, suuruse, sulamisrežiimi ja muid parameetreid.

On lühendomadus järgmistele omadustele: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Süntaks

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

Väärtused

Väärtus	Kirjeldus
`none`	Keelab maskimise (vaikeväärtus)
`url()`	Tee maskipildini (SVG, PNG)
`linear-gradient()`	Lineaarne gradient maskina
`radial-gradient()`	Radiaalne gradient maskina
`position`	Maski asukoht (top, center, 50% 50% jne)
`size`	Maski suurus (cover, contain, 100px 50px)
`repeat`	Maski kordamine (no-repeat, repeat-x, space)
`mode`	Sulamisrežiim (alpha, luminance, match-source)
`composite`	Maskide kompositsioon (add, subtract, intersect, exclude)

Piltide ettevalmistus

Olgu meil looduse pilt, mida me kärpime, ja SVG pildid südamest ja noolest, mille järgi me lõikame:

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

:

Näide . Mask-pilt

Paneme oma pildile peale maski-südame:

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

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

:

Näide . Maski positsioon

Mask-süda vasakus ülanurgas:

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

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

:

Näide . Maski positsioon

Mask-süda paremas alanurgas:

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

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

:

Näide . Maski positsioon

Mask-süda keskel vasakul:

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

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

:

Näide . Maski positsioon

Mask-süda keskel:

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

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

:

Näide . Maski positsioon

Mask-süda 100px vasakult ja 200px ülevalt:

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

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

:

Näide . Maski suurus cover

Väärtus cover skaleerib maski nii, et see kataks elemendi täielikult, säilitades proportsioonid. Võib kärpida maski servi, kui proportsioonid ei ühti:

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

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

:

Näide . Maski suurus contain

Väärtus contain skaleerib maski nii, et see mahuks elemendi sisse tervikuna, säilitades proportsioonid. Võib jätta tühjad alad:

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

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

:

Näide . Maski suurus

Fikseeritud suurus määrab maski täpsed mõõtmed. Näiteks teeme maski suurusega 50px:

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

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

:

Näide . Kordamine no-repeat

Väärtus no-repeat keelab maski kordamise. Mask kuvatakse ainult üks kord määratud positsioonis:

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

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

:

Näide . Kordamine repeat-x

Väärtus repeat-x kordab maski ainult horisontaalteljel:

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

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

:

Näide . Kompositsioon add

Väärtus add liidab mitu maski (tulemuseks on kõikide maskide ühend):

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

:

Näide . Kompositsioon intersect

Väärtus intersect näitab ainult maskide ristumisala:

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

:

Näide . Kompositsioon exclude

Väärtus exclude näitab maskide alasid, mis ei ristu:

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

:

Näide . Kompositsioon subtract

Väärtus subtract lahutab teise maski esimesest. Näiteks teeme ühe südame ja lahutame sellest noole:

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

:

Näide . Laiendatud mask kirje

Mask omadus, kirjutatud eraldi komponentidena:

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

:

Näide . SVG pildi jaoks

SVG elemendi kasutamine maskina pildi jaoks:

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

:

Näide . SVG gradendi jaoks

SVG elemendi kasutamine maskina gradiendi jaoks:

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

:

Vaata ka

omadus mask-position,
määrab maski asukoha elemendi suhtes
omadus mask-image,
määrab maski pildi
omadus mask-mode,
määrab kuidas mask interakteerub taustaga
omadus mask-size,
määrab maski suuruse
omadus mask-repeat,
määrab maski kordamise
omadus mask-origin,
määrab maski positsioneerimisala
omadus mask-clip,
määrab maski kärpimisala
omadus mask-composite,
määrab kuidas mitu maski kombineeritakse

↑

Eesti▼

Afrikaans Azərbaycan Български বাংলা Беларуская Čeština Dansk Deutsch Ελληνικά English Español 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

Me kasutame saidi toimimiseks, analüüsi ja personaliseerimiseks küpsiseid. Andmete töötlemine toimub vastavalt Privaatsuspoliitikale.

nõustu kõigega häälesta keeldu