clip ဂုဏ်သတ္တိ

clip ဂုဏ်သတ္တိသည် အပြည့်အ၀ အနေအထားသတ်မှတ်ထားသော အစိတ်အပိုင်းကို ဖြတ်တောက်ပြီး သတ်မှတ်ထားသော ထောင့်မှန်စတုဂံ နယ်ပယ်ကိုသာ မြင်နိုင်အောင် ပြုလုပ်ပေးနိုင်သည်။ တန်ဖိုးကို rect လုပ်ဆောင်ချက်ကို အသုံးပြု၍ သတ်မှတ်ပေးသည်။

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

cssရွေးချယ်သူ {
  clip: rect(အပေါ်, ညာ, အောက်, ဘယ်) | auto;
}

ဓာတ်ပုံများ ပြင်ဆင်ခြင်း

ကျွန်ုပ်တို့ ဖြတ်တောက်မည့် သဘာ၀ဓာတ်ပုံတစ်ပုံရှိသည်ဆိုပါစို့:

html<img src="image.jpg" width="500">

Результат:

ဥပမာ

အလယ်ဗဟိုအပိုင်းကိုသာ မြင်နိုင်အောင် ပုံကို ဖြတ်တောက်ကြည့်ရအောင်:

html<div class="container">
  <img class="image" src="image.jpg">
</div>
css.container {
  position: relative;
  width: 400px;
  height: 300px;
}
.image {
  position: absolute;
  clip: rect(50px, 350px, 250px, 50px);
  width: 400px;
  height: 300px;
}

Результат:

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

  • clip-path ဂုဏ်သတ္တိ,
    အစိတ်အပိုင်းများဖြတ်တောက်ရန် ခေတ်မီရွေးချယ်စရာ
  • mask ဂုဏ်သတ္တိ,
    မျက်နှာဖုံးတင်ခွင့်ပြုသည့် ဂုဏ်သတ္တိ
  • position ဂုဏ်သတ္တိ,
    clip အလုပ်လုပ်ရန် လိုအပ်သည်
  • overflow ဂုဏ်သတ္တိ,
    ပါဝင်အရာများ၏ အစိတ်အပိုင်းများကိုလည်း ဝှက်ထားနိုင်သည်