103 of 313 menu

Mask xassəsi

mask xassəsi maskalama üçün bütün xassələrin qısaldılmış formasıdır və bunları təyin etməyə imkan verir: maskə şəkli, onun mövqeyi, ölçüsü, birləşmə rejimi və digər parametrlər.

Aşağıdakı xassələr üçün qısaldılmış xassədir: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Sintaksis

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

Qiymətlər

Qiymət	Təsvir
`none`	Maskalamanı söndürür (standart qiymət)
`url()`	Maskə şəklinin yolu (SVG, PNG)
`linear-gradient()`	Maskə kimi xətti qradient
`radial-gradient()`	Maskə kimi radial qradient
`position`	Maskanın mövqeyi (top, center, 50% 50% və s.)
`size`	Maskanın ölçüsü (cover, contain, 100px 50px)
`repeat`	Maskanın təkrarı (no-repeat, repeat-x, space)
`mode`	Birləşmə rejimi (alpha, luminance, match-source)
`composite`	Maskaların kompozisiyası (add, subtract, intersect, exclude)

Şəkillərin hazırlanması

Tutaq ki, bizim kəsəcəyimiz təbiət şəklimiz var, və onun üzərindən kəsəcəyimiz ürək və ox SVG şəkilləri var:

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

:

Nümunə . Maskə-şəkli

Gəlin şəklimizin üzərinə ürək maskəsi əlavə edək:

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

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

:

Nümunə . Maskanın mövqeyi

Ürək maskəsi yuxarı sol küncdə:

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

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

:

Nümunə . Maskanın mövqeyi

Ürək maskəsi aşağı sağ küncdə:

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

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

:

Nümunə . Maskanın mövqeyi

Ürək maskəsi solda mərkəzdə:

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

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

:

Nümunə . Maskanın mövqeyi

Ürək maskəsi mərkəzdə:

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

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

:

Nümunə . Maskanın mövqeyi

Ürək maskəsi soldan 100px və yuxarıdan 200px:

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

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

:

Nümunə . Maskanın ölçüsü cover

cover qiyməti maskanı elementi tamamilə örtəcək şəkildə, nisbətləri qoruyaraq miqyaslayır. Əgər nisbətlər üst-üstə düşmürsə, maskanın kənarları kəsilə bilər:

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

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

:

Nümunə . Maskanın ölçüsü contain

contain qiyməti maskanı elementin içinə tam sığacaq şəkildə, nisbətləri qoruyaraq miqyaslayır. Boş sahələr qala bilər:

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

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

:

Nümunə . Maskanın ölçüsü

Sabit ölçü maskanın dəqiq ölçülərini təyin edir. Məsələn, ölçüsü 50px olan bir maska edək:

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

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

:

Nümunə . Təkrar no-repeat

no-repeat qiyməti maskanın təkrarını söndürür. Maska yalnız göstərilən mövqedə bir dəfə göstərilir:

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

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

:

Nümunə . Təkrar repeat-x

repeat-x qiyməti maskanı yalnız üfüqi ox boyunca təkrarlayır:

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

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

:

Nümunə . Kompozisiya add

add qiyməti bir neçə maskanı toplayır (nəticə - bütün maskaların birləşməsidir):

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

:

Nümunə . Kompozisiya intersect

intersect qiyməti yalnız maskaların kəsişmə sahəsini göstərir:

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

:

Nümunə . Kompozisiya exclude

exclude qiyməti kəsişməyən maska sahələrini göstərir:

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

:

Nümunə . Kompozisiya subtract

subtract qiyməti birinci maskadan ikincini çıxarır. Nümunə üçün bir ürək edək və ondan oxu çıxaq:

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

:

Nümunə . Açıq yazılış mask

Mask xassəsi, ayrı-ayrı tərkib hissələri ilə yazılmış:

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

:

Nümunə . Şəkil üçün SVG

Şəkil üçün maska kimi SVG elementindən istifadə:

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

:

Nümunə . Qradient üçün SVG

Qradient üçün maska kimi SVG elementindən istifadə:

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

:

Həmçinin bax

mask-position xassəsi,
maskanın elementə nisbətən mövqeyini təyin edir
mask-image xassəsi,
maska üçün şəkli təyin edir
mask-mode xassəsi,
maskanın fonla necə qarşılıqlı əlaqədə olduğunu təyin edir
mask-size xassəsi,
maskanın ölçüsünü təyin edir
mask-repeat xassəsi,
maskanın təkrarını təyin edir
mask-origin xassəsi,
maskanın yerləşdiyi sahəni təyin edir
mask-clip xassəsi,
maskanın kəsilmə sahəsini təyin edir
mask-composite xassəsi,
bir neçə maskanın necə birləşdirildiyini təyin edir

↑

Azərbaycan▼

Afrikaans Български বাংলা Беларуская Č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

Biz saytin işi, analitika və fərdiləşdirmə üçün cookie istifadə edirik. Məlumatların emalı Məxfilik Siyasəti əsasında həyata keçirilir.

hamısını qəbul et konfiqurasiya et rədd et