mask ဂုဏ်သတ္တိ

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

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

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

cssselector {
  mask: [mask-image] [mask-position] / [mask-size]
        [mask-repeat] [mask-origin] [mask-clip]
        [mask-mode] [mask-composite];
}

တန်ဖိုးများ

ပုံများကို ပြင်ဆင်ခြင်း

ကျွန်ုပ်တို့ ဖြတ်တောက်မည့် သဘာဝပုံရိပ် တစ်ပုံရှိပါစို့။ ကျွန်ုပ်တို့ ဖြတ်ထုတ်မည့် နှလုံးသားပုံ နှင့် မြှားပုံ SVG ပုံများလည်း ရှိပါသည်:

html<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">

Результат:

ဥပမာ . ပုံမျက်နှာဖုံး

ကျွန်ုပ်တို့၏ပုံပေါ်သို့ နှလုံးသားပုံမျက်နှာဖုံးကို တင်ကြည့်ကြပါစို့:

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

css#image {
  width: 500px;
  height: 281px;
  background: red;
  mask: url("heart.svg") center/300px no-repeat;
}

Результат:

ဥပမာ . မျက်နှာဖုံး၏တည်နေရာ

ဘယ်ဘက်အပေါ်ထောင့်ရှိ နှလုံးသားပုံမျက်နှာဖုံး:

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

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") left top/150px no-repeat;
}

Результат:

ဥပမာ . မျက်နှာဖုံး၏တည်နေရာ

ညာဘက်အောက်ထောင့်ရှိ နှလုံးသားပုံမျက်နှာဖုံး:

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

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") right bottom/150px no-repeat;
}

Результат:

ဥပမာ . မျက်နှာဖုံး၏တည်နေရာ

ဘယ်ဘက်ဗဟိုတွင် ရှိသော နှလုံးသားပုံမျက်နှာဖုံး:

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

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

Результат:

ဥပမာ . မျက်နှာဖုံး၏တည်နေရာ

ဗဟိုတွင် ရှိသော နှလုံးသားပုံမျက်နှာဖုံး:

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

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

Результат:

ဥပမာ . မျက်နှာဖုံး၏တည်နေရာ

ဘယ်ဘက်မှ 100px၊ အပေါ်မှ 200px တွင်ရှိသော နှလုံးသားပုံမျက်နှာဖုံး:

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

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

Результат:

ဥပမာ . မျက်နှာဖုံး၏အရွယ်အစား cover

cover တန်ဖိုးသည် အစိတ်အပိုင်းကို အပြည့်အဝဖုံးအုပ်ရန် မျက်နှာဖုံးကို အချိုးကျ ချဲ့ပေးသည်။ အချိုးမကိုက်ညီပါက မျက်နှာဖုံး၏အနားများကို ဖြတ်တောက်နိုင်သည်:

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

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") center/cover;
}

Результат:

ဥပမာ . မျက်နှာဖုံး၏အရွယ်အစား contain

contain တန်ဖိုးသည် မျက်နှာဖုံးကို အစိတ်အပိုင်းအတွင်း အလုံးစုံကျရောက်စေရန် အချိုးကျ ချဲ့ပေးသည်။ လွတ်နေသောနေရာများ ကျန်နိုင်သည်:

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

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

Результат:

ဥပမာ . မျက်နှာဖုံး၏အရွယ်အစား

သတ်မှတ်ထားသောအရွယ်အစားသည် မျက်နှာဖုံး၏ တိကျသောအရွယ်အစားကို သတ်မှတ်ပေးသည်။ ဥပမာအားဖြင့် မျက်နှာဖုံး၏အရွယ်အစားကို 50px အဖြစ် လုပ်ကြည့်ပါမည်:

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

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

Результат:

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

no-repeat တန်ဖိုးသည် မျက်နှာဖုံးထပ်ခြင်းကို ပိတ်ထားသည်။ မျက်နှာဖုံးကို သတ်မှတ်ထားသောတည်နေရာတွင် တစ်ကြိမ်သာ ပြသသည်:

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

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") top left / 150px no-repeat;
}

Результат:

ဥပမာ . ထပ်ခြင်း repeat-x

repeat-x တန်ဖိုးသည် မျက်နှာဖုံးကို ပြင်ညီဦးတည်ချက်တစ်ခုတည်းတွင် ထပ်ပေးသည်:

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

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

Результат:

ဥပမာ . ပေါင်းစပ်ခြင်း add

add တန်ဖိုးသည် မျက်နှာဖုံးများစွာကို ပေါင်းသည် (ရလဒ်မှာ မျက်နှာဖုံးအားလုံး၏ ပေါင်းစပ်မှု):

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

css#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 တန်ဖိုးသည် မျက်နှာဖုံးများ ဖြတ်သန်းသောနေရာကိုသာ ပြသသည်:

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

css#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 တန်ဖိုးသည် မျက်နှာဖုံးများ ဖြတ်သန်းခြင်းမရှိသော နေရာများကို ပြသသည်:

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

css#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 တန်ဖိုးသည် ဒုတိယမျက်နှာဖုံးကို ပထမမျက်နှာဖုံးမှ နုတ်သည်။ ဥပမာအနေဖြင့် နှလုံးသားပုံတစ်ခုလုပ်ပြီး ၎င်းမှ မြှားပုံကို နုတ်ကြည့်ပါမည်:

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

css#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 ဂုဏ်သတ္တိ:

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

css#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 အစိတ်အပိုင်းကို အသုံးပြုခြင်း:

html<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>

css#image {
  width: 500px;
  height: 281px;
  background: red;
  mask: url(#mask);
}

Результат:

ဥပမာ . ရောင်စုံပြောင်းခြင်းအတွက် SVG

ရောင်စုံပြောင်းခြင်းအတွက် မျက်နှာဖုံးအဖြစ် SVG အစိတ်အပိုင်းကို အသုံးပြုခြင်း:

html<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>

css#elem {
  width: 500px;
  height: 300px;
  background: linear-gradient(45deg, red, blue);
  mask: url(#star-mask);
}

Результат:

ဒါလည်းကြည့်ပါ