mask-repeat ဂုဏ်သတ္တိ

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

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

cssselector {
  mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}

တန်ဖိုးများ

ဥပမာ . ထပ်ခြင်း မပြုခြင်း (no-repeat)

ထပ်ခြင်းမပြုဘဲ အလယ်ဗဟိုတွင် နှလုံးပုံတစ်ပုံသာ:

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

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 100px;
  mask-repeat: no-repeat;
}

Результат:

ဥပမာ . ရေပြင်ညီအတိုင်း ထပ်ခြင်း (repeat-x)

နှလုံးပုံများကို ရေပြင်ညီအတိုင်းသာ ထပ်သည်:

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

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

Результат:

ဥပမာ . ဒေါင်လိုက်အတိုင်း ထပ်ခြင်း (repeat-y)

နှလုံးပုံများကို ဒေါင်လိုက်အတိုင်းသာ ထပ်သည်:

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

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center top;
  mask-size: 50px;
  mask-repeat: repeat-y;
}

Результат:

ဥပမာ . ကြားအကွာအဝေးဖြင့် ထပ်ခြင်း (space)

နှလုံးပုံများကို ကြားအကွာအဝေးများဖြင့် ညီမျှစွာ ဖြန့်ဖြူးထားသည်:

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

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-size: 80px;
  mask-repeat: space;
}

Результат:

ဥပမာ . အရွယ်ညှိနိုင်သော ထပ်ခြင်း (round)

ညီမျှစွာ ဖြည့်စွက်ရန်အတွက် နှလုံးပုံများကို အရွယ်ညှိသည်:

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

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-size: 80px;
  mask-repeat: round;
}

Результат:

ဤအကြောင်းလည်း ကြည့်ပါ