ဂုဏ်သတ္တိ mask-size
ဂုဏ်သတ္တိ mask-size သည် မျက်နှာဖုံးပုံရိပ်၏ အရွယ်အစားကို သတ်မှတ်ပေးသည်။ ပစ်ဆယ်များ/ရာခိုင်နှုန်းများဖြင့် သတ်သတ်မှတ်မှတ်အရွယ်အစားများသတ်မှတ်နိုင်သလို သော့ချက်စကားလုံးများဖြစ်သော cover နှင့် contain တို့ကိုလည်း အသုံးပြုနိုင်သည်။
ဝါကျဖွဲ့ပုံ
selector {
mask-size: auto | <length> | <percentage> | cover | contain;
}
တန်ဖိုးများ
| တန်ဖိုး | ဖော်ပြချက် |
|---|---|
auto |
ပုံရိပ်၏ မူရင်းအရွယ်အစား (ပုံသေအားဖြင့်)။ |
cover |
မျက်နှာဖုံးကို အချိုးအစားများကို ထိန်းသိမ်းကာ အစိတ်အပိုင်းကို အပြည့်အဝဖုံးအုပ်နိုင်ရန် အရွယ်ချဲ့ပေးသည်။ |
contain |
မျက်နှာဖုံးကို အချိုးအစားများကို ထိန်းသိမ်းကာ အစိတ်အပိုင်းအတွင်း အပြည့်အဝကျရောက်နိုင်ရန် အရွယ်ချဲ့ပေးသည်။ |
100px 50px |
ပစ်ဆယ်များဖြင့် သတ်သတ်မှတ်မှတ်အရွယ်အစားများ။ |
50% 100% |
အစိတ်အပိုင်း၏ အရွယ်အစားမှ ရာခိုင်နှုန်းများဖြင့် အရွယ်အစားများ။ |
နမူနာ . cover အရွယ်အစား
မျက်နှာဖုံးကို အစိတ်အပိုင်းကို အပြည့်အဝဖုံးအုပ်စေရန် အရွယ်ချဲ့ထားသည်။
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: cover;
mask-repeat: no-repeat;
}
:
နမူနာ . contain အရွယ်အစား
မျက်နှာဖုံးကို အစိတ်အပိုင်းအတွင်း အပြည့်အဝကျရောက်စေရန် အရွယ်ချဲ့ထားသည်။
<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;
}
:
နမူနာ . ပစ်ဆယ်များဖြင့် သတ်မှတ်ထားသောအရွယ်အစား
150×150 ပစ်ဆယ် အရွယ်အစားရှိသော မျက်နှာဖုံး။
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
နမူနာ . ရာခိုင်နှုန်းများဖြင့် အရွယ်အစား
မျက်နှာဖုံးသည် အစိတ်အပိုင်း၏ အကျယ်၏ 80% နှင့် အမြင့်၏ 60% ကို ယူထားသည်။
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 80% 60%;
mask-repeat: no-repeat;
}
:
နမူနာ . ဝင်ရိုးအလိုက် အရွယ်အစားအမျိုးမျိုး
အကျယ် 200px နှင့် အမြင့် 100px ရှိသော မျက်နှာဖုံး။
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 200px 100px;
mask-repeat: no-repeat;
}
:
ဤသည်ကိုလည်း ကြည့်ပါ
-
ဂုဏ်သတ္တိ
mask-position,
မျက်နှာဖုံး၏ တည်နေရာကို သတ်မှတ်ပေးသည် -
ဂုဏ်သတ္တိ
mask-repeat,
မျက်နှာဖုံး၏ ထပ်ကျော့မှုကို သတ်မှတ်ပေးသည် -
ဂုဏ်သတ္တိ
mask,
မျက်နှာဖုံးခြင်း ဂုဏ်သတ္တိအားလုံးအတွက် အတိုကောက်
