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

ផ្ទៃខាងក្រោយ (CSS Backgrounds)

CSS ផ្តល់អោយអ្នកនូវសមត្ថភាពយ៉ាងពេញលេញក្នុងការរៀបចំផ្ទៃខាងក្រោយ។ អ្នកអាចដាក់ពណ៌, ដាក់រូបភាព, ដាក់រូបភាពត្រួតគ្នា និងរៀបចំទីតាំងវាបានយ៉ាងស្អាត។

១. ពណ៌ និង រូបភាពផ្ទៃ (Color & Image)

• background-color : ចាក់ពណ៌ផ្ទៃធម្មតា។
• background-image : ដាក់រូបភាពជាផ្ទៃដោយប្រើ url('...')។

២. ការគ្រប់គ្រងរូបភាពផ្ទៃខាងក្រោយ

តាមលំនាំដើម បើរូបភាពតូចជាងប្រអប់ វានឹងត្រូវបោះពុម្ពត្រួតៗគ្នា (Repeat) ដូចការូការ៉ូផ្ទះអញ្ចឹង ដើម្បីអោយពេញប្រអប់។ ដើម្បីកែបញ្ហានេះ និងតម្រឹមអោយស្អាត យើងប្រើ៖

• background-repeat: no-repeat; : បញ្ឈប់ការបោះពុម្ពត្រួតគ្នា។
• background-position: center; : តម្រឹមរូបភាពអោយចំកណ្តាលប្រអប់ (អាចប្រើ top, bottom, left, right)។
• background-size: cover; : សំខាន់បំផុត! វាពង្រីករូបភាពអោយពេញប្រអប់ជានិច្ច តែអាចនឹងកាត់គែមលើសខ្លះចេញ។
• background-size: contain; : រក្សារូបភាពអោយឃើញទាំងមូលជានិច្ច តែអាចសល់ចន្លោះប្រហោងក្នុងប្រអប់។

៣. ការសរសេរកាត់ (Background Shorthand)

ជំនួសអោយការសរសេរ ៤ ទៅ ៥ បន្ទាត់ខាងលើ អ្នកអាចសរសេររួមគ្នាក្នុងបន្ទាត់តែមួយបានតាមរយៈ background។