background-clip ဂုဏ်သတ္တိ

background-clip ဂုဏ်သတ္တိသည် နောက်ခံအရောင်ဖြည့်ခြင်း သို့မဟုတ် နောက်ခံဓာတ်ပုံတစ်ခုက အစိတ်အပိုင်းတစ်ခုနှင့် ဆက်စပ်၍ မည်ကဲ့သို့ထားရှိမည်ကို သတ်မှတ်ပေးသည်- နယ်နမိတ်အောက်တွင်၊ padding အတွင်း၌သာ သို့မဟုတ် အကြောင်းအရာအပေါ်၌သာ။

ထူးခြားချက်များ

• border-box ကို ဖောက်ထွင်းမြင်ရသော နယ်နမိတ်များနှင့် အသုံးပြုပါက နောက်ခံသည် ၎င်းတို့အောက်တွင် မြင်ရလိမ့်မည်
• text တန်ဖိုးသည် ပြည့်စုံသော ပံ့ပိုးမှုအတွက် vendor prefixes များ လိုအပ်သည်
• ဂုဏ်သတ္တိသည် gradient များနှင့် များပြားသော နောက်ခံများနှင့် အလုပ်လုပ်သည်
• border-radius အသုံးပြုပါက နောက်ခံသည် လှည့်ပတ်ထားသောထောင့်များအတိုင်း လှီးဖြတ်ခံရသည်

ဘရောက်ဆာများမှ ပံ့ပိုးမှု

ခေတ်သစ် ဘရောက်ဆာအားလုံးသည် border-box၊ padding-box နှင့် content-box တို့ကို ပံ့ပိုးပေးသည်။ text တန်ဖိုးသည် -webkit- prefix လိုအပ်ပြီး Chrome၊ Safari၊ Edge တို့တွင် ပံ့ပိုးပေးသည်။

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

cssselector {
  background-clip: border-box | padding-box | content-box | text;
}

တန်ဖိုးများ

စံထားရှိသော တန်ဖိုး- border-box.

ဥပမာ . border-box တန်ဖိုး

နောက်ခံသည် ဖောက်ထွင်းမြင်ရသော နယ်နမိတ်အောက်သို့ ဝင်ရောက်သည်-

html<div id="elem"></div>

css#elem {
  background-clip: border-box;
  background-color: #ffd6d6;
  background-repeat: no-repeat;
  border: 10px dashed rgba(0,0,0,0.3);
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

ဥပမာ . padding-box တန်ဖိုး

နောက်ခံသည် နယ်နမိတ်အောက်သို့ မဝင်ရောက်-

html<div id="elem"></div>

css#elem {
  background-clip: padding-box;
  background-color: #ffd6d6;
  background-repeat: no-repeat;
  border: 10px dashed rgba(0,0,0,0.5);
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

ဥပမာ . content-box တန်ဖိုး

နောက်ခံသည် padding ပေါ်သို့ မဝင်ရောက်-

html<div id="elem">
  စာသား စာသား စာသား စာသား စာသား
  စာသား စာသား စာသား စာသား စာသား
  စာသား စာသား စာသား စာသား စာသား
</div>

css#elem {
  background-clip: content-box;
  background-color: #ffd6d6;
  background-repeat: no-repeat;
  border: 10px dashed rgba(0,0,0,0.3);
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

ဥပမာ . text တန်ဖိုး

နောက်ခံသည် စာသားအတိုင်း လှီးဖြတ်ခံရသည် (-webkit-text-fill-color ကို transparent တန်ဖိုးဖြင့် လိုအပ်သည်)-

html<div id="elem">စာသား စာသား စာသား</div>

css#elem {
  display: inline-block;
  background: linear-gradient(to right, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  
  font-size: 40px;
  font-weight: bold;
}

Результат:

ဤအရာကိုလည်း ကြည့်ပါ