CSS Masking
CSS ကို မျက်နှာဖုံးစွပ်ခြင်းဖြင့် သင်သည် ဒြပ်စင်၏ အစိတ်အပိုင်းများကို တစ်စိတ်တစ်ပိုင်း သို့မဟုတ် အပြည့်အဝ ဖျောက်ထားရန် ဒြပ်စင်တစ်ခုအပေါ်တွင် မျက်နှာဖုံးအလွှာတစ်ခု ဖန်တီးသည်။
CSS mask-image Property
CSS mask-imageပိုင်ဆိုင်မှုသည် မျက်နှာဖုံးအလွှာပုံတစ်ပုံကို သတ်မှတ်သည်။
မျက်နှာဖုံးအလွှာပုံသည် PNG ပုံ၊ SVG ပုံ၊ CSS gradient သို့မဟုတ် SVG <mask> ဒြပ်စင် ဖြစ်နိုင်သည်။
Browser ပံ့ပိုးမှု
မှတ်ချက်- ဘရောက်ဆာအများစုသည် CSS မျက်နှာဖုံးစွပ်ခြင်းအတွက် တစ်စိတ်တစ်ပိုင်းပံ့ပိုးမှုသာရှိသည်။ ဘရောက်ဆာအများစုရှိ စံသတ်မှတ်ချက်များအပြင် -webkit- ရှေ့ဆက်ကို အသုံးပြုရန် လိုအပ်ပါသည်။
အောက်ပါဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝပံ့ပိုးပေးသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးပါသည်။ နံပါတ်များ -webkit- နောက်တွင် ရှေ့ဆက်တွဲဖြင့် လုပ်ဆောင်သော ပထမဆုံးဗားရှင်းကို သတ်မှတ်ပါ။
| Property | |||||
|---|---|---|---|---|---|
| mask-image | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
ပုံကို Mask Layer အဖြစ် အသုံးပြုပါ။
မျက်နှာဖုံးအလွှာအဖြစ် PNG သို့မဟုတ် SVG ရုပ်ပုံကို အသုံးပြုရန်၊ မျက်နှာဖုံးအလွှာပုံတွင် ဖြတ်သန်းရန် url() တန်ဖိုးကို အသုံးပြုပါ။
မျက်နှာဖုံးပုံတွင် ပွင့်လင်းမြင်သာသော သို့မဟုတ် တစ်ဝက်သာသော ဧရိယာရှိရန် လိုအပ်သည်။ အနက်ရောင်သည် အပြည့်အဝ ပွင့်လင်းမှုကို ညွှန်ပြသည်။
ဤသည်မှာ ကျွန်ုပ်တို့အသုံးပြုမည့် မျက်နှာဖုံးပုံ (PNG ပုံ) ဖြစ်သည်။
ဤသည်မှာ အီတလီရှိ Cinque Terre မှ ပုံဖြစ်သည်။
ယခုအခါ၊ အီတလီနိုင်ငံ၊ Cinque Terre မှ ပုံအတွက် မျက်နှာဖုံးအလွှာအဖြစ် မျက်နှာဖုံးပုံ (အထက် PNG ပုံ) ကို အသုံးပြုပါသည်။
ဥပမာ
ဤသည်မှာ အရင်းအမြစ်ကုဒ်ဖြစ်သည်-
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
နမူနာရှင်းပြထားပါတယ်။
ပိုင်ဆိုင်မှု သည် mask-imageဒြပ်စင်တစ်ခုအတွက် မျက်နှာဖုံးအလွှာအဖြစ် အသုံးပြုမည့်ပုံကို သတ်မှတ်သည်။
ပိုင်ဆိုင်မှု သည် mask-repeatမျက်နှာဖုံးပုံတစ်ပုံကို ထပ်တလဲလဲဖြစ်စေခြင်းရှိ၊ မရှိကို သတ်မှတ်ပေးပါသည်။ တန်ဖိုး သည် no-repeat
မျက်နှာဖုံးပုံအား ထပ်ခါတလဲလဲလုပ်မည်မဟုတ်ကြောင်း (မျက်နှာဖုံးပုံကို တစ်ကြိမ်သာပြသပါမည်)။
နောက်ဥပမာ
ကျွန်ုပ်တို့သည် mask-repeatပစ္စည်းဥစ္စာကို ချန်လှပ်ထားပါက၊ အီတလီနိုင်ငံ၊ Cinque Terre မှ ပုံတစ်ပုံလုံးတွင် မျက်နှာဖုံးပုံအား ထပ်ခါတလဲလဲ ပြုလုပ်ပါမည်။
ဥပမာ
ဤသည်မှာ အရင်းအမြစ်ကုဒ်ဖြစ်သည်-
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
}
Gradients ကို Mask Layer အဖြစ် အသုံးပြုပါ။
CSS linear နှင့် radial gradient များကို mask ပုံများအဖြစ်လည်း သုံးနိုင်သည်။
Linear Gradient နမူနာများ
ဤတွင်၊ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ပုံအတွက် မျက်နှာဖုံးအလွှာအဖြစ် linear-gradient ကိုသုံးပါသည်။ ဤမျဉ်းဖြောင့်အရောင်သည် အပေါ်မှ (အနက်ရောင်) မှ အောက်သို့ (ဖောက်ထွင်းမြင်နိုင်သည်)
ဥပမာ
မျက်နှာဖုံးအလွှာအဖြစ် linear gradient ကိုသုံးပါ
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black,
transparent);
}
ဤတွင်၊ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ပုံအတွက် မျက်နှာဖုံးအလွှာအဖြစ် စာသားဖုံးအုပ်ခြင်းနှင့်အတူ linear-gradient ကိုအသုံးပြုသည်-
Cinque Terre သည် အီတလီနိုင်ငံ အနောက်မြောက်ပိုင်းရှိ Liguria အတွင်းရှိ ကမ်းရိုးတန်းဒေသတစ်ခုဖြစ်သည်။ ၎င်းသည် La Spezia ပြည်နယ်၏အနောက်ဘက်တွင်တည်ရှိပြီး Monterosso al Mare၊ Vernazza၊ Corniglia၊ Manarola နှင့် Riomaggiore ရွာငါးရွာပါဝင်သည်။
Cinque Terre သည် အီတလီနိုင်ငံ အနောက်မြောက်ပိုင်းရှိ Liguria အတွင်းရှိ ကမ်းရိုးတန်းဒေသတစ်ခုဖြစ်သည်။ ၎င်းသည် La Spezia ပြည်နယ်၏အနောက်ဘက်တွင်တည်ရှိပြီး Monterosso al Mare၊ Vernazza၊ Corniglia၊ Manarola နှင့် Riomaggiore ရွာငါးရွာပါဝင်သည်။
Cinque Terre သည် အီတလီနိုင်ငံ အနောက်မြောက်ပိုင်းရှိ Liguria အတွင်းရှိ ကမ်းရိုးတန်းဒေသတစ်ခုဖြစ်သည်။ ၎င်းသည် La Spezia ပြည်နယ်၏အနောက်ဘက်တွင်တည်ရှိပြီး Monterosso al Mare၊ Vernazza၊ Corniglia၊ Manarola နှင့် Riomaggiore ရွာငါးရွာပါဝင်သည်။
ဥပမာ
မျက်နှာဖုံးအလွှာအဖြစ် စာသားဖုံးအုပ်ခြင်းနှင့်အတူ linear gradient ကိုသုံးပါ-
.mask1 {
max-width: 600px;
height: 350px;
overflow-y: scroll;
background: url(img_5terre.jpg) no-repeat;
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient (black, transparent);
}
Radial Gradient နမူနာများ
ဤတွင်၊ ကျွန်ုပ်တို့၏ရုပ်ပုံအတွက် မျက်နှာဖုံးအလွှာအဖြစ် အချင်း-အရောင်ခြယ်မှု (စက်ဝိုင်းပုံသဏ္ဍန်) ကို အသုံးပြုသည်-
ဥပမာ
မျက်နှာဖုံးအလွှာ (စက်ဝိုင်းတစ်ခုအဖြစ် radial gradient ကိုသုံးပါ)
.mask2 {
-webkit-mask-image:
radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
ဤတွင်၊ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ရုပ်ပုံအတွက် မျက်နှာဖုံးအလွှာအဖြစ် အချင်း-အရောင်ခြယ်မှု (ellipse အဖြစ်ပုံဖော်) ကို အသုံးပြုသည်-
ဥပမာ
မျက်နှာဖုံးအလွှာ (ellipse) အဖြစ် အခြား radial gradient ကို သုံးပါ ။
.mask3 {
-webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0,
0, 0, 0.5) 50%);
mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0,
0, 0.5));
}
SVG ကို Mask Layer အဖြစ် အသုံးပြုပါ။
<mask>မျက်နှာဖုံးစွပ်အကျိုးသက်ရောက်မှုများဖန်တီးရန် SVG ဒြပ်စင်ကို SVG ဂရပ်ဖစ်အတွင်းတွင် အသုံးပြုနိုင်သည်။
ဤတွင်၊ ကျွန်ုပ်တို့၏ <mask>ရုပ်ပုံအတွက် မတူညီသောမျက်နှာဖုံးအလွှာများကိုဖန်တီးရန် SVG ဒြပ်စင်ကိုအသုံးပြုသည်-
ဥပမာ
SVG မျက်နှာဖုံးအလွှာ (တြိဂံအဖြစ် ဖွဲ့စည်းထားသည်)
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
ဥပမာ
SVG မျက်နှာဖုံးအလွှာ (ကြယ်ပွင့်အဖြစ် ဖွဲ့စည်းထားသည်)
<svg width="600" height="400">
<mask id="svgmask2">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78
160,198"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg>
ဥပမာ
SVG မျက်နှာဖုံးအလွှာ (စက်ဝိုင်းများအဖြစ် ဖွဲ့စည်းထားသည်)
<svg width="600" height="400">
<mask
id="svgmask3">
<circle fill="#ffffff" cx="75" cy="75"
r="75"></circle>
<circle fill="#ffffff" cx="80"
cy="260" r="75"></circle>
<circle fill="#ffffff"
cx="270" cy="160" r="75"></circle>
</mask>
<image
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg"
mask="url(#svgmask3)"></image>
</svg>
CSS Masking Properties
အောက်ပါဇယားတွင် CSS ဖုံးကွယ်ထားသော ဂုဏ်သတ္တိများအားလုံးကို စာရင်းပြုစုထားသည်။
| Property | Description |
|---|---|
| mask-image | Specifies an image to be used as a mask layer for an element |
| mask-mode | Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask |
| mask-origin | Specifies the origin position (the mask position area) of a mask layer image |
| mask-position | Sets the starting position of a mask layer image (relative to the mask position area) |
| mask-repeat | Specifies how the mask layer image is repeated |
| mask-size | Specifies the size of a mask layer image |