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)

Сүрөттөрдү даярдоо

Биз кесип ала турган жаратылыш сүрөтү бар болсун жана биз кесүү үчүн колдонобуз жүрөкчөнүн жана жебе сүрөттөрү бар болсун:

<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 файлдарын колдонобуз. Маалыматтарды иштетүү Маалыматты коргоо саясаты боюнча жүргүзүлөт.

баарын кабыл алуу ыңгайлаштыруу четке кагуу