ផ្ទៃខាងក្រោយ

មេរៀន​នេះ មាន​ជា​វីដេអូ ។

មេរៀន​ជា​វីដេអូ

ដោយ​ប្រើ CSS យើង​អាច​បង្កើត​ផ្ទៃ​ខាងក្រោយ​បាន​ច្រើន​លក្ខណៈ ៖

ផ្ទៃ​ខាងក្រោយ​ជា​ពណ៌

ដើម្បី​កំណត់​ផ្ទៃ​ខាង​ក្រោយ​ជា​ពណ៌ គឺ​ប្រើ background-color ។ តម្លៃ​របស់​វា គឺ​ជា​ពណ៌ ។

.a {
    background-color: rgb(123, 50, 50);
}
<p class="a">អរគុណ​សំរាប់​ការ​សិក្សា​ជាមួយ KHODE ។</p>
<p class="a">KHODE គឺ​ឥត​គិត​ថ្លៃ​សំរាប់​ថ្ងៃ​នេះ និង​ជា​និរន្តរ៍ ។</p>
<p>បើ​អ្នក​ស្រឡាញ់​ការ​សិក្សា​មួយ​នេះ សូម​ជួយ​ចែក​រំលែក ។</p>

ផ្ទៃ​ខាងក្រោយ​ជា​រូបភាព

ដើម្បី​កំណត់​ផ្ទៃ​ខាង​ក្រោយ​ជា​រូបភាព គឺ​ប្រើ background-image ។ តម្លៃ​របស់​វា គឺ url() ។

url() គឺ​ជា function ដែល​មាន​ស្រាប់ នៅ​ក្នុង CSS ។ យើង​នឹង​សិក្សា​អំពី​វា នៅ​មេរៀន​ក្រោយ ។ នៅ​មេរៀន​នេះ យើង​គ្រាន់​តែ​ដឹង​ថា យើង​ត្រូវ​កំណត់ URL ក្នុង​អព្ភន្តរសញ្ញា ចូល​ទៅ​ក្នុង​វង់ក្រចក​នៃ function នោះ ។

div {
    background-image: url("/khodelogo.png"), url("/khode-logo.png");
}
<div>
    <p>អរគុណ​សំរាប់​ការ​សិក្សា​ជាមួយ KHODE ។</p>
    <p>KHODE គឺ​ឥត​គិត​ថ្លៃ​សំរាប់​ថ្ងៃ​នេះ និង​ជា​និរន្តរ៍ ។</p>
    <p>បើ​អ្នក​ស្រឡាញ់​ការ​សិក្សា​មួយ​នេះ សូម​ជួយ​ចែក​រំលែក ។</p>
</div>

អ្នក​អាច​កំណត់​រូបភាព ២ ឬ​ច្រើន​ជា​ផ្ទៃ​ខាងក្រោយ​បាន ដោយ​ត្រូវ​ផ្ដាច់​គ្នា​ដោយ​ការ​ដក​ឃ្លា ។

ភាព​ច្រំដែល​នៃ​ផ្ទៃ​ខាងក្រោយ

ផ្ទៃ​ខាងក្រោយ​នឹង​បង្ហាញ​ច្រំដែលៗ​ពាស់​ពេញ​ធាតុ​មួយ ។ ដើម្បី​កែ​តម្រូវ​ភាព​ច្រំដែល​នៃ​ផ្ទៃ​ខាងក្រោយ គឺ​ត្រូវ​ប្រើ background-repeat ។

តម្លៃ​នៃ backgroun-repeat
តម្លៃ អត្ថន័យ
no-repeat មិន​ច្រំដែល
repeat-x ច្រំដែល​តាម​អ័ក្ស x (ផ្ដេក)
repeat-y ច្រំដែល​តាម​អ័ក្ស y (បញ្ឈរ)
div {
    background-image: url("/khode-logo.png");
    background-repeat: repeat-y;
}
p {
    height: 50px;
}
<div>
    <p>អរគុណ​សំរាប់​ការ​សិក្សា​ជាមួយ KHODE ។</p>
    <p>KHODE គឺ​ឥត​គិត​ថ្លៃ​សំរាប់​ថ្ងៃ​នេះ និង​ជា​និរន្តរ៍ ។</p>
    <p>បើ​អ្នក​ស្រឡាញ់​ការ​សិក្សា​មួយ​នេះ សូម​ជួយ​ចែក​រំលែក ។</p>
</div>

ទីតាំង​ផ្ទៃ​ខាងក្រោយ

ផ្ទៃ​ខាងក្រោយ​ជា​រូបភាព តែង​ចាប់​ផ្ដើម​បង្ហាញ​ពី​ជ្រុង​ខាងលើ​ខាង​ឆ្វេង ។ យើង​អាច​កំណត់​ទីតាំង​ផ្សេង​ពី​នោះ​បាន ដោយ​ប្រើ background-position ។

តម្លៃ​នៃ backgroun-position

ត្រូវ​កំណត់ ២ តម្លៃ ៖ ទី​១​សំរាប់​អ័ក្ស x ឯ​ទី​២​សំរាប់​អ័ក្ស y ។

តម្លៃ អត្ថន័យ
left ខាង​ឆ្វេង
right ខាង​ស្ដាំ
center កណ្ដាល
top ខាងលើ
bottom ខាងក្រោម
ខ្នាត​ប្រវែង ជា​ខ្នាត​ដែល​យើង​បាន​សិក្សា​កន្លង​មក

បើ​កំណត់​តែ​មួយ​តម្លៃ នោះ​មួយ​តម្លៃ​ទៀត គឺ​កណ្ដាលដោយ​ស្វ័យ​ប្រវត្តិ ។

div {
    background-color: pink;
    background-image: url("/khode-logo.png");
    background-repeat: no-repeat;
    background-position: right;
}
<div>
    <p>អរគុណ​សំរាប់​ការ​សិក្សា​ជាមួយ KHODE ។</p>
    <p>KHODE គឺ​ឥត​គិត​ថ្លៃ​សំរាប់​ថ្ងៃ​នេះ និង​ជា​និរន្តរ៍ ។</p>
    <p>បើ​អ្នក​ស្រឡាញ់​ការ​សិក្សា​មួយ​នេះ សូម​ជួយ​ចែក​រំលែក ។</p>
</div>

ទំហំ​ផ្ទៃ​ខាងក្រោយ

យើង​អាច​កំណត់​ទំហំ​រូបភាព​នៃ​ផ្ទៃ​ខាងក្រោយ ដោយ​ប្រើ background-size ។

តម្លៃ​នៃ backgroun-size
តម្លៃ អត្ថន័យ
cover ពង្រីក​រូប​ឲ្យ​ពេញ​ផ្ទៃ​ខាងក្រោយ ដោយ​រក្សា​ទម្រង់​ដើម​នៃ​រូបភាព ។
contain ពង្រីក​រូប​ឲ្យ​ពេញ​ផ្ទៃ​ខាងក្រោយ តែ​មិន​រក្សា​ទម្រង់​ដើម​នៃ​រូបភាព​ទេ ។ (រូបភាព​អាច​នឹង​ទ្រវែង ឬ​សំប៉ែត)
ប្រវែង​ផ្ដេក ប្រវែង​បញ្ឈរ 20px 50% មាន​ន័យ​ថា ប្រវែង​ផ្ដេក 20px រីឯ​ប្រវែង​បញ្ឈរ​គឺ 50% ។
div {
    background-color: pink;
    background-image: url("/khode-logo.png");
    background-repeat: no-repeat;
    background-size: 50% 100%;
}
<div>
    <p>អរគុណ​សំរាប់​ការ​សិក្សា​ជាមួយ KHODE ។</p>
    <p>KHODE គឺ​ឥត​គិត​ថ្លៃ​សំរាប់​ថ្ងៃ​នេះ និង​ជា​និរន្តរ៍ ។</p>
    <p>បើ​អ្នក​ស្រឡាញ់​ការ​សិក្សា​មួយ​នេះ សូម​ជួយ​ចែក​រំលែក ។</p>
</div>

ការ​កំណត់​ផ្ទៃខាងក្រោយ​តាម​វិធី​ខ្លី

property នៃ​ផ្ទៃ​ខាងក្រោយ ដែល​យើង​បាន​សិក្សា​កន្លង​មក​នឹង យើង​អាច​សរសេរ​នៅ​ក្នុង property តែ​មួយ​បាន គឺ background ។

តម្លៃ​នៃ background

តម្លៃ​របស់​វា ត្រូវ​តាម​លំដាប់​ដូច​ខាងក្រោម (យើង​អាច​អត់​កំណត់​មួយ​ណា​ក៏​បាន​ដែរ) ៖

  1. ពណ៌
  2. រូបភាព
  3. ទីតាំង/ទំហំ (ត្រូវ​មាន​សញ្ញា /)
  4. ច្រំដែល
div {
    background: 
        yellow 
        url("/khode-logo.png") 
        25px 15px/75px 50px 
        repeat-x fixed;
}
<div>
    <p>អរគុណ​សំរាប់​ការ​សិក្សា​ជាមួយ KHODE ។</p>
    <p>KHODE គឺ​ឥត​គិត​ថ្លៃ​សំរាប់​ថ្ងៃ​នេះ និង​ជា​និរន្តរ៍ ។</p>
    <p>បើ​អ្នក​ស្រឡាញ់​ការ​សិក្សា​មួយ​នេះ សូម​ជួយ​ចែក​រំលែក ។</p>
</div>
ទំព៏រ​ដើម កូដ វីដេអូ បញ្ជី ចែករំលែក បោះពុម្ភ ឡើង​លើ Facebook Google Plus Twitter មតិ ឧបត្ថម្ភ ទំនាក់ទំនង អាជ្ញាប័ណ្ឌ សិទ្ធ​អ្នក​និពន្ធ បិទ Khode Academy មុន បន្ទាប់ ប្ដូរ​ម៉ូត