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

Биз веб-сайт ишлаши, таҳлил қилиш ва персоналлаштириш учун кукидан фойдаланамиз. Маълумотларни қайта ишлаш Махфийлик сиёсатига мувофиқ амалга оширилади.

ҳаммасини қабул қилиш мослаштириш рад этиш