103 of 313 menu

mask ဂုဏ်သတ္တိ

mask ဂုဏ်သတ္တိသည် မျက်နှာဖုံးခြင်းဆိုင်ရာ ဂုဏ်သတ္တိအားလုံးအတွက် အတိုကောက်ဖြစ်ပြီး မျက်နှာဖုံးပုံရိပ်၊ ၎င်း၏တည်နေရာ၊ အရွယ်အစား၊ ပေါင်းစပ်ပုံစနစ် နှင့် အခြားသတ်မှတ်ချက်များကို သတ်မှတ်ပေးနိုင်သည်။

အောက်ပါဂုဏ်သတ္တိများအတွက် အတိုကောက်ဂုဏ်သတ္တိဖြစ်သည်: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

ဝါကျဖွဲ့စည်းပုံ

selector {
	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 များကို အသုံးပြုပါသည်။ ဒေတာများကို ပြုပြင်ခြင်းသည် ကိုယ်ရေးကိုယ်တာ မူဝါဒအတိုင်း ဖြစ်ပါသည်။

အားလုံးလက်ခံရန် ပြင်ဆင်ရန် ငြင်းပယ်ရန်