103 of 313 menu

Mask xususiyati

mask xususiyati barcha maskalash xususiyatlari uchun qisqartma hisoblanadi va quyidagilarni belgilash imkonini beradi: mask-rasm, uning joylashuvi, o‘lchami, aralashma rejimi va boshqa parametrlar.

Quyidagi xususiyatlar uchun qisqartma xususiyat hisoblanadi: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Sintaksis

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

Qiymatlar

Qiymat	Tavsif
`none`	Maskalashni o‘chiradi (standart qiymat)
`url()`	Mask-rasmga yo‘l (SVG, PNG)
`linear-gradient()`	Mask sifatida chiziqli gradient
`radial-gradient()`	Mask sifatida radial gradient
`position`	Maskning joylashuvi (top, center, 50% 50% va boshqalar)
`size`	Maskning o‘lchami (cover, contain, 100px 50px)
`repeat`	Maskning takrorlanishi (no-repeat, repeat-x, space)
`mode`	Aralashma rejimi (alpha, luminance, match-source)
`composite`	Masklarning kompozitsiyasi (add, subtract, intersect, exclude)

Rasmlarni tayyorlash

Biz kesadigan tabiat rasmi bor deb faraz qilaylik va biz kesib olamiz, va SVG yurakcha rasm va o‘q, ular bo‘ylab biz kesib olamiz:

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

:

Misol . Mask-rasm

Keling, yurakcha maskni o‘zimizning ustiga qo‘yamiz rasm:

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

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

:

Misol . Maskning joylashuvi

Chap yuqori burchakdagi yurakcha mask:

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

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

:

Misol . Maskning joylashuvi

O‘ng pastki burchakdagi yurakcha mask:

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

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

:

Misol . Maskning joylashuvi

Chap tomonda markazdagi yurakcha mask:

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

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

:

Misol . Maskning joylashuvi

Markazdagi yurakcha mask:

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

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

:

Misol . Maskning joylashuvi

Chapdan 100px va yuqoridan 200px yurakcha mask:

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

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

:

Misol . Maskning o‘lchami cover

cover qiymati maskni elementni butunlay qoplash uchun masshtablaydi, nisbatlarni saqlab qoladi. Agar nisbatlar mos kelmasa, maskning chetlarini kesib tashlashi mumkin:

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

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

:

Misol . Maskning o‘lchami contain

contain qiymati maskni elementga butunlay sig‘dirish uchun masshtablaydi, nisbatlarni saqlab qoladi. Bo‘sh joylarni qoldirishi mumkin:

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

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

:

Misol . Maskning o‘lchami

Belgilangan o‘lcham maskning aniq o‘lchamlarini belgilaydi. Masalan, keling 50px o‘lchamdagi maskni yaratamiz:

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

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

:

Misol . Takrorlanish no-repeat

no-repeat qiymati maskning takrorlanishini o‘chiradi. Mask faqat ko‘rsatilgan joyda bir marta ko‘rsatiladi:

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

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

:

Misol . Takrorlanish repeat-x

repeat-x qiymati maskni faqat gorizontal o‘q bo‘ylab takrorlaydi:

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

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

:

Misol . Kompozitsiya add

add qiymati bir nechta masklarni qo‘shadi (natija - barcha masklarning birlashmasi):

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

:

Misol . Kompozitsiya intersect

intersect qiymati faqat masklarning kesishish sohasini ko‘rsatadi:

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

:

Misol . Kompozitsiya exclude

exclude qiymati bir-biri bilan kesishmaydigan mask sohalarini ko‘rsatadi:

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

:

Misol . Kompozitsiya subtract

subtract qiymati birinchi maskdan ikkinchi maskni ayiradi. Misol uchun, bitta yurakcha yaratamiz va undan o‘qni ayiramiz:

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

:

Misol . Yoyilgan yozuv mask

Mask xususiyati, alohida tarkibiy qismlar bilan yozilgan:

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

:

Misol . Rasm uchun SVG

SVG-elementidan rasm uchun mask sifatida foydalanish :

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

:

Misol . Gradient uchun SVG

SVG-elementidan gradient uchun mask sifatida foydalanish :

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

:

Shuningdek qarang

mask-position xususiyati,
maskning elementga nisbatan joylashuvini belgilaydi
mask-image xususiyati,
mask uchun rasmni belgilaydi
mask-mode xususiyati,
mask fon bilan qanday o‘zaro ta’sirlashishini belgilaydi
mask-size xususiyati,
maskning o‘lchamini belgilaydi
mask-repeat xususiyati,
maskning takrorlanishini belgilaydi
mask-origin xususiyati,
maskning joylashish sohasini belgilaydi
mask-clip xususiyati,
maskning kesish sohasini belgilaydi
mask-composite xususiyati,
bir nechta masklar qanday birlashtirilishini belgilaydi

↑

Oʻzbek▼

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 Ўзбек Tiếng Việt

Biz sayt ishlashi, tahlil qilish va shaxsiylashtirish uchun cookie-fayllardan foydalanamiz. Ma'lumotlarni qayta ishlash Maxfiylik siyosatiga muvofiq amalga oshiriladi.

hammasini qabul qilish sozlash rad etish