103 of 313 menu

Hasiyet mask

mask hasiýeti, ähli maskeleme hasiýetleri üçin gysgaça görnüş bolup, aşakdakylary kesgitlemäge mümkinçilik berýär: maskanyň suraty, onuň ýerleşýän ýeri, ululygy, birikme tertibi we beýleki parametrler.

Aşakdaky hasiýetler üçin gysgaça görnüş hasiýetidir: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Syntax

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

Görnüşleri

Görnüşi	Düşündirişi
`none`	Maskeleme ýapylýar (deslapky bahasy)
`url()`	Maska suratyna ýol (SVG, PNG)
`linear-gradient()`	Maska hökmünde çyzyk gradient
`radial-gradient()`	Maska hökmünde radial gradient
`position`	Maskanyň ýeri (top, center, 50% 50% we ş.m.)
`size`	Maskanyň ululygy (cover, contain, 100px 50px)
`repeat`	Maskanyň gaýtalanmagy (no-repeat, repeat-x, space)
`mode`	Bilelikde goýuş tertibi (alpha, luminance, match-source)
`composite`	Maskalaryň kompozisiýasy (add, subtract, intersect, exclude)

Suratlary taýýarlamak

Bizde we aýyrjak bolýan tebigy surat bar bolsun, we biziň kesip aýyryjak bolýan SVG ýürek we ok şekilli suratlarymyz bar bolsun:

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

:

Mysal . Maska-surat

Geliň, ýürek şekilli maskany öz suratymyza goýalyň:

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

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

:

Mysal . Maskanyň ýeri

Ýürek şekilli maska çep ýokarky burçda:

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

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

:

Mysal . Maskanyň ýeri

Ýürek şekilli maska sag aşaky burçda:

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

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

:

Mysal . Maskanyň ýeri

Ýürek şekilli maska çepden merkezde:

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

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

:

Mysal . Maskanyň ýeri

Ýürek şekilli maska merkezde:

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

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

:

Mysal . Maskanyň ýeri

Ýürek şekilli maska çepden 100px we ýokardan 200px:

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

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

:

Mysal . Maskanyň ululygy cover

cover görnüşi, element doly örtülýänçä maskany proporsiýalary saklap ulaldýar. Eger proporsiýalar gabat gelmese, maskanyň gyralary kesilip biler:

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

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

:

Mysal . Maskanyň ululygy contain

contain görnüşi, maskany element içine ýerleşýänçä proporsiýalary saklap ulaldýar. Boş meýdanlar galyp biler:

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

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

:

Mysal . Maskanyň ululygy

Bellenen ululyk maskanyň takyk ölçeglerini kesgitleýär. Mysal üçin, 50px ululykda bir maska dözedeliň:

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

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

:

Mysal . Gaýtalanmagy no-repeat

no-repeat görnüşi maskanyň gaýtalanmagyny ýapýar. Maska diňe bir gezek kesgitlenen ýerde görkezilýär:

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

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

:

Mysal . Gaýtalanmagy repeat-x

repeat-x görnüşi maskany diňe göni çyzyk boýunça gaýtalýar:

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

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

:

Mysal . Kompozisiýa add

add görnüşi birnäçe maskany goşýar (netije - ähli maskalaryň birleşmesi):

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

:

Mysal . Kompozisiýa intersect

intersect görnüşi diňe maskalaryň kesişýän meýdanyny görkezýär:

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

:

Mysal . Kompozisiýa exclude

exclude görnüşi kesişmeýän maska meýdanlaryny görkezýär:

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

:

Mysal . Kompozisiýa subtract

subtract görnüşi ikinji maskany birinjiden aýyrýar. Mysal üçin, bir ýürek şekilli dözedeliň we ondan ok şekilli maskany aýyralyň:

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

:

Mysal . Giniş ýazylan mask hasiýeti

Mask hasiýeti, aýry-ayry düzüm bölekleri bilen ýazylan:

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

:

Mysal . Surat üçin SVG

Surat üçin maska hökmünde SVG elementini ulanmak:

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

:

Mysal . Gradient üçin SVG

Gradient üçin maska hökmünde SVG elementini ulanmak:

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

:

Şeýle-de serediň

mask-position hasiýeti,
elemente göre maskanyň ýerini kesgitleýär
mask-image hasiýeti,
maska üçin surat kesgitleýär
mask-mode hasiýeti,
maskanyň fon bilen nähili gatnaşýandygyny kesgitleýär
mask-size hasiýeti,
maskanyň ululygyny kesgitleýär
mask-repeat hasiýeti,
maskanyň gaýtalanmagyny kesgitleýär
mask-origin hasiýeti,
maskanyň ýerleşýän meýdanyny kesgitleýär
mask-clip hasiýeti,
maskanyň kesilýän meýdanyny kesgitleýär
mask-composite hasiýeti,
birnäçe maskanyň nähili birleşýändigini kesgitleýär

↑

Türkmen▼

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ürkçe Ўзбек Oʻzbek Tiếng Việt

Biz sahypanyň işlemegi, analitika we şahsyýetleşdirmek üçin cookie ulanýarys. Maglumatlaryň işlenişi Gizlinlik syýasaty boýunça amala aşyrylýar.

hemmesini kabul et sazlamak ret et