103 of 303 menu

Veturia mask

Veturia mask është një shkurtim për të gjitha veturit e maskimit dhe lejon të vendosë: imazh-maskë, pozicionin e saj, madhësinë, mënyrën e përzierjes dhe parametra të tjerë.

Është një veturi e shkurtuar për vetitë e mëposhtme: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Sintaksa

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

Vlerat

Vlera	Përshkrimi
`none`	Çaktivizon maskimin (vlera e paracaktuar)
`url()`	Rruga te imazhi-maskë (SVG, PNG)
`linear-gradient()`	Gradient linear si maskë
`radial-gradient()`	Gradient radial si maskë
`position`	Pozicioni i maskës (top, center, 50% 50% etj.)
`size`	Madhësia e maskës (cover, contain, 100px 50px)
`repeat`	Përsëritja e maskës (no-repeat, repeat-x, space)
`mode`	Mënyra e përzierjes (alpha, luminance, match-source)
`composite`	Kompozimi i maskave (add, subtract, intersect, exclude)

Përgatitja e imazheve

Le të themi se kemi një imazh të natyrës që do ta presim, dhe imazhet SVG të zemrës dhe shigjetës, përgjatë të cilave do të presim:

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

:

Shembull . Maskë-imazh

Le të vendosim një maskë-zemër në imazhin tonë:

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

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

:

Shembull . Pozicioni i maskës

Maskë-zemër në këndin e sipërm të majtë:

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

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

:

Shembull . Pozicioni i maskës

Maskë-zemër në këndin e poshtëm të djathtë:

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

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

:

Shembull . Pozicioni i maskës

Maskë-zemër në qendër majtas:

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

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

:

Shembull . Pozicioni i maskës

Maskë-zemër në qendër:

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

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

:

Shembull . Pozicioni i maskës

Maskë-zemër 100px nga e majta dhe 200px nga lart:

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

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

:

Shembull . Madhësia e maskës cover

Vlera cover shkallëzon maskën në mënyrë që të mbulojë plotësisht elementin, duke ruajtur përmasat. Mund të presë skajet e maskës nëse përmasat nuk përputhen:

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

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

:

Shembull . Madhësia e maskës contain

Vlera contain shkallëzon maskën në mënyrë që të vendoset plotësisht brenda elementit, duke ruajtur përmasat. Mund të lë hapësira të zbrazëta:

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

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

:

Shembull . Madhësia e maskës

Madhësia fikse vendos përmasat e sakta të maskës. Për shembull, le të bëjmë një maskë me madhësi 50px:

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

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

:

Shembull . Përsëritja no-repeat

Vlera no-repeat çaktivizon përsëritjen e maskës. Mask shfaqet vetëm një herë në pozicionin e specifikuar:

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

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

:

Shembull . Përsëritja repeat-x

Vlera repeat-x përsërit maskën vetëm përgjatë boshtit horizontal:

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

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

:

Shembull . Kompozimi add

Vlera add shton disa maska (rezultati - bashkimi i të gjitha maskave):

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

:

Shembull . Kompozimi intersect

Vlera intersect tregon vetëm zonën e kryqëzimit të maskave:

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

:

Shembull . Kompozimi exclude

Vlera exclude tregon zonat e maskave që nuk kryqëzohen:

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

:

Shembull . Kompozimi subtract

Vlera subtract zbret maskën e dytë nga e para. Për shembull, le të bëjmë një zemër dhe të zbresim prej saj një shigjetë:

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

:

Shembull . Shënimi i zgjeruar mask

Veturia mask, e shkruar me përbërës të veçantë:

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

:

Shembull . SVG për imazh

Përdorimi i elementit SVG si maskë për imazh:

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

:

Shembull . SVG për gradient

Përdorimi i elementit SVG si maskë për 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);
}

:

Shihni gjithashtu

veturia mask-position,
përcakton pozicionin e maskës në lidhje me elementin
veturia mask-image,
vendos imazhin për maskë
veturia mask-mode,
përcakton se si maska ndërvepron me sfondin
veturia mask-size,
përcakton madhësinë e maskës
veturia mask-repeat,
përcakton përsëritjen e maskës
veturia mask-origin,
përcakton zonën e pozicionimit të maskës
veturia mask-clip,
përcakton zonën e prerjes së maskës
veturia mask-composite,
përcakton se si disa maska kombinohen

↑

Shqip▼

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

Ne përdorim cookie për funksionimin e sajtit, analizën dhe personalizimin. Përpunimi i të dhënave bëhet në përputhje me Politikën e Privatësisë.

prano të gjitha konfiguro refuzo