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-ներ կայքի աշխատանքի, վերլուծության և անհատականացման համար։ Տվյալների մշակումը կատարվում է համաձայն Գաղտնիության քաղաքականության։

ընդունել բոլորը կարգավորել մերժել