mask-repeat ဂုဏ်သတ္တိ
mask-repeat ဂုဏ်သတ္တိသည် မျက်နှာဖုံး၏အရွယ်အစားသည် အစိတ်အပိုင်း၏အရွယ်အစားထက် သေးငယ်ပါက ၎င်းကို ထပ်ခြင်းနည်းလမ်းကို သတ်မှတ်ပေးသည်။
background-repeat ကဲ့သို့ အလားတူအလုပ်လုပ်ပြီး
မျက်နှာဖုံးများကို သက်ရောက်စေသည်။
ဝါကျဖွဲ့စည်းပုံ
selector {
mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}
တန်ဖိုးများ
| တန်ဖိုး | ဖော်ပြချက် |
|---|---|
repeat |
မျက်နှာဖုံးကို ဝင်ရိုးနှစ်ခုစလုံးတွင် ထပ်သည် (နဂိုအတိုင်း)။ |
no-repeat |
မျက်နှာဖုံးကို မထပ်ပါ။ |
repeat-x |
မျက်နှာဖုံးကို ရေပြင်ညီအတိုင်းသာ ထပ်သည်။ |
repeat-y |
မျက်နှာဖုံးကို ဒေါင်လိုက်အတိုင်းသာ ထပ်သည်။ |
space |
မျက်နှာဖုံးကို ညီမျှသော ကြားအကွာအဝေးများဖြင့် ထပ်သည်။ |
round |
ညီညီမျှမျှ ဖြည့်စွက်ရန်အတွက် မျက်နှာဖုံးကို အရွယ်ညှိသည်။ |
ဥပမာ . ထပ်ခြင်း မပြုခြင်း (no-repeat)
ထပ်ခြင်းမပြုဘဲ အလယ်ဗဟိုတွင် နှလုံးပုံတစ်ပုံသာ:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 100px;
mask-repeat: no-repeat;
}
:
ဥပမာ . ရေပြင်ညီအတိုင်း ထပ်ခြင်း (repeat-x)
နှလုံးပုံများကို ရေပြင်ညီအတိုင်းသာ ထပ်သည်:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: left center;
mask-size: 50px;
mask-repeat: repeat-x;
}
:
ဥပမာ . ဒေါင်လိုက်အတိုင်း ထပ်ခြင်း (repeat-y)
နှလုံးပုံများကို ဒေါင်လိုက်အတိုင်းသာ ထပ်သည်:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center top;
mask-size: 50px;
mask-repeat: repeat-y;
}
:
ဥပမာ . ကြားအကွာအဝေးဖြင့် ထပ်ခြင်း (space)
နှလုံးပုံများကို ကြားအကွာအဝေးများဖြင့် ညီမျှစွာ ဖြန့်ဖြူးထားသည်:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: space;
}
:
ဥပမာ . အရွယ်ညှိနိုင်သော ထပ်ခြင်း (round)
ညီမျှစွာ ဖြည့်စွက်ရန်အတွက် နှလုံးပုံများကို အရွယ်ညှိသည်:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: round;
}
:
ဤအကြောင်းလည်း ကြည့်ပါ
-
mask-sizeဂုဏ်သတ္တိ,
မျက်နှာဖုံး၏အရွယ်အစားကို သတ်မှတ်ပေးသည် -
mask-positionဂုဏ်သတ္တိ,
မျက်နှာဖုံး၏တည်နေရာကို သတ်မှတ်ပေးသည် -
maskဂုဏ်သတ္တိ,
မျက်နှာဖုံးဆိုင်ရာ ဂုဏ်သတ္တိအားလုံးအတွက် အတိုကောက်
