103 of 313 menu

Хосияти mask

Хосияти mask ихтисори ҳамаи хосиятҳои маски кардан аст ва имкон медиҳад, ки: тасвири маск, ҷойгиршавии он, андоза, реҷаи омехташавӣ ва дигар параметрҳоро муайян кард.

Хосияти-ихтисор барои хосиятҳои зерин аст: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Синтаксис

интихобкунанда {
	mask: [mask-image] [mask-position] / [mask-size]
	      [mask-repeat] [mask-origin] [mask-clip]
	      [mask-mode] [mask-composite];
}

Қиматҳо

Қимат	Тавсиф
`none`	Маски карданро хомуш мекунад (қимати пешфарз)
`url()`	Роҳ ба тасвири маск (SVG, PNG)
`linear-gradient()`	Градиенти хаттӣ ҳамчун маск
`radial-gradient()`	Градиенти радиалӣ ҳамчун маск
`position`	Ҷойгиршавии маск (top, center, 50% 50% ва ғ.)
`size`	Андозаи маск (cover, contain, 100px 50px)
`repeat`	Такрори маск (no-repeat, repeat-x, space)
`mode`	Реҷаи омехташавӣ (alpha, luminance, match-source)
`composite`	Композитсияи маскҳо (add, subtract, intersect, exclude)

Омода кардани тасвирҳо

Бигзор мо тасвире аз табиат дошта бошем, ки онро бурида мебарем, ва тасвирҳои SVG-и дилча ва тир, ки аз рӯи онҳо мо мебурем, дошта бошем:

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

:

Намуна . Маск-тасвир

Биёед маски дилчаро ба тасвири мо гузорем:

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

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

:

Намуна . Ҷойгиршавии маск

Маски дилча дар гӯшаи болои чап:

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

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

:

Намуна . Ҷойгиршавии маск

Маски дилча дар гӯшаи поёни рост:

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

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

:

Намуна . Ҷойгиршавии маск

Маски дилча дар маркази чап:

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

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

:

Намуна . Ҷойгиршавии маск

Маски дилча дар марказ:

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

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

:

Намуна . Ҷойгиршавии маск

Маски дилча 100px аз чап ва 200px аз боло:

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

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

:

Намуна . Андозаи маски cover

Қимати cover маскро масштаббандӣ мекунад, то онро пурра ба элемент пӯшонад, ниспаҳниҳоро нигоҳ медорад. Метонад канорҳои маскро бурад, агар ниспаҳниҳо мувофиқат накунанд:

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

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

:

Намуна . Андозаи маски contain

Қимати contain маскро масштаббандӣ мекунад, то онро комилан дар элемент ҷойгир кунад, ниспаҳниҳоро нигоҳ медорад. Метавонад майдонҳои холӣ гузорад:

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

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

:

Намуна . Андозаи маск

Андозаи фиксирӣ андозаҳои аниқи маскро муқаррар мекунад. Барои мисол маскро бо андозаи 50px созем:

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

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

:

Намуна . Такрори no-repeat

Қимати no-repeat такрори маскро хомуш мекунад. Маск танҳо як бор дар ҷойгиршавии муайянкарда намоиш дода мешавад:

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

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

:

Намуна . Такрори repeat-x

Қимати repeat-x маскро танҳо дар меҳвари уфуқӣ такрор мекунад:

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

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

:

Намуна . Композитсияи add

Қимати add якчанд маскҳоро ҷамъ мекунад (натиҷа - муттаҳид кардани ҳамаи маскҳо):

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

:

Намуна . Композитсияи intersect

Қимати intersect фақат майдони буриши маскҳоро нишон медиҳад:

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

:

Намуна . Композитсияи exclude

Қимати exclude майдонҳои маскҳоро нишон медиҳад, ки буриш намеёбанд:

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

:

Намуна . Композитсияи subtract

Қимати subtract маски дуюмро аз маски аввал хориҷ мекунад. Барои намуна як дилча созем ва аз он тирро хориҷ кунем:

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

:

Намуна . Навиштани кушодаи mask

Хосияти mask, ки ба таркиботи ҷудогона навишта шудааст:

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

:

Намуна . SVG барои тасвир

Истифодаи унсури SVG ҳамчун маск барои тасвир:

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

:

Намуна . SVG барои градиент

Истифодаи унсури SVG ҳамчун маск барои градиент:

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

:

Инчунин нигаред

хосияти mask-position,
ҷойгиршавии маскро нисбат ба элемент муайян мекунад
хосияти mask-image,
барои маск тасвир таъин мекунад
хосияти mask-mode,
чӣ гуна маск бо замина муомила мекунад, муайян мекунад
хосияти mask-size,
андозаи маскро муайян мекунад
хосияти mask-repeat,
такрори маскро муайян мекунад
хосияти mask-origin,
майдони ҷойгиршавии маскро муайян мекунад
хосияти mask-clip,
майдони буридани маскро муайян мекунад
хосияти mask-composite,
чӣ гуна якчанд маскҳо муттаҳид мешаванд, муайян мекунад

↑

Тоҷикӣ▼

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

Мо барои коркарди сомона, таҳлил ва шахсӣ кардан аз cookie истифода мебарем. Коркарди маълумот мувофиқи Сиёсати махфият сурат мегирад.

ҳамаро қабул кардан танзим кардан рад кардан