background-origin ගුණය

background-origin ගුණය මගින් අංගයකට සාපේක්ෂව පසුබිම් පින්තූරය (පින්තූරය පමණක්, පිරවුම නොවේ) ස්ථානගත වන ආකාරය නිර්වචනය කරයි: පසුබිම් පින්තූරයේ කොටසක් දාරය යටට ගමන් කරයි, පසුබිම දාරය යටට ගමන් නොකරයි නැතිනම් පසුබිම අංගයේ අන්තර්ගතයට ඉහලින් පමණක් ස්ථානගත වේ (එනම් padding පසුබිම ඉවතට තල්ලු කරයි).

වාක්‍ය රචනා ක්‍රමය

cssතේරුම් ගන්නා {
  background-origin: padding-box | border-box | content-box;
}

අගයන්

පෙරනිමි අගය: padding-box.

සටහන්

background-origin ගුණය ක්‍රියාත්මක නොවේ, background-attachment ගේ අගය fixed වන විට. එසේම background-repeat ගේ අගය repeat වන විට background-origin ගුණය සැමවිටම border-box අගයෙන් යුතුව ක්‍රියාත්මක වේ.

උදාහරණය . පෙරනිමිය අනුව

පෙරනිමිය අනුව පසුබිම දාරය යටට ගමන් නොකරයි:

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

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

උදාහරණය . border-box අගය

දැන් පසුබිම දාරය යටට ගමන් කරයි:

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

css#elem {
  background-origin: border-box;
  background-image: url("bg.png");
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

උදාහරණය . content-box අගය

දැන් පසුබිම padding මගින් ඉවතට තල්ලු වේ:

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

css#elem {
  background-origin: content-box;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

උදාහරණය . background-repeat: repeat විට

background-repeat ගේ අගය repeat වන විට background-origin ගුණය සැමවිටම ක්‍රියාත්මක වේ, border-box අගයෙන් යුතුව, එනම් පසුබිම සැමවිටම දාරය යටට ගමන් කරයි:

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

css#elem {
  background-repeat: repeat;
  background-image: url("bg.png");
  border: 10px dashed black;
  padding: 30px;
  width: 350px;
  height: 300px;
}

Результат:

මෙයද බලන්න