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 файлдарын қолданамыз. Деректерді өңдеу Құпиялылық саясаты бойынша жүреді.

барлығын қабылдау баптау қабылдамау