ផ្ទៃខាងក្រោយ
ផ្ទៃខាងក្រោយជាពណ៌
ដើម្បីកំណត់ផ្ទៃខាងក្រោយជាពណ៌ គឺប្រើ background-color property ។ តម្លៃរបស់វា គឺជាពណ៌ ។
អ្នកអាចប្រើពណ៌ជាចំនួនដូចជា rgb(), rgba() (មានភាពថ្លា), hex (#3498db), ឬឈ្មោះពណ៌ (blue, red, green) ។ ការប្រើ rgba() អនុញ្ញាតឲ្យអ្នកកំណត់ភាពថ្លា (transparency) ពី 0 (ថ្លាពេញលេញ) ទៅ 1 (ទាំងស្រុងមិនថ្លា) ។
ផ្ទៃខាងក្រោយជារូបភាព
ដើម្បីកំណត់ផ្ទៃខាងក្រោយជារូបភាព គឺប្រើ background-image property ។ តម្លៃរបស់វា គឺ url() function ដែលមានផ្លូវទៅរូបភាព ។
យើងនឹងសិក្សាអំពី function ដែលមាននៅក្នុង CSS នៅពេលក្រោយ ។
អ្នកអាចកំណត់រូបភាព ២ឬច្រើនជាផ្ទៃខាងក្រោយបាន ដោយត្រូវផ្ដាច់គ្នាដោយការដកឃ្លា ។ រូបភាពដែលសរសេរពីមុននឹងបង្ហាញនៅខាងលើ ៖
ភាពច្រំដែលនៃផ្ទៃខាងក្រោយ
ផ្ទៃខាងក្រោយនឹងបង្ហាញច្រំដែលៗពេញធាតុមួយ ។ ដើម្បីកំណត់លក្ខណៈលើភាពច្រំដែលនៃផ្ទៃខាងក្រោយ គឺត្រូវប្រើ background-repeat property ។ តម្លៃរបស់វាមាន ៖
repeat- ច្រំដែលតាមទិសទាំង២ (លំនាំដើម)repeat-x- ច្រំដែលតែទិសផ្ដេកrepeat-y- ច្រំដែលតែទិសបញ្ឈរno-repeat- មិនច្រំដែលspace- ច្រំដែលដោយមានចន្លោះសមគ្នាround- ច្រំដែលដោយពង្រីក/បង្រួមរូបឲ្យសម
ទីតាំងផ្ទៃខាងក្រោយ
ផ្ទៃខាងក្រោយជារូបភាព ជាទូទៅចាប់ផ្ដើមបង្ហាញពីជ្រុងខាងលើខាងឆ្វេង ។ អ្នកអាចបង្ហាញឲ្យវាបង្ហាញពីទីតាំងផ្សេងពីនោះ ដោយប្រើ background-position property ។ តម្លៃរបស់វាត្រូវកំណត់២តម្លៃ តម្លៃទី១គឺសំរាប់ទីតាំងតាមទិសដៅផ្ដេក តម្លៃទី២គឺសំរាប់ទីតាំងតាមទិសដៅបញ្ឈរ ។
តម្លៃនីមួយៗអាចជា ៖
- ប្រវែង (px, em, rem, etc.)
- ភាគរយ (%) ធៀបនឹងទំហំធាតុ
- ពាក្យទាំងនេះ ៖
left,right,center,top,bottom
បើកំណត់តែមួយតម្លៃលើ background-position នោះមួយតម្លៃទៀត គឺកណ្ដាល (center) ដោយស្វ័យប្រវត្តិ ។
ទំហំផ្ទៃខាងក្រោយ
អ្នកអាចកំណត់ទំហំរូបភាពនៃផ្ទៃខាងក្រោយ ដោយប្រើ background-size property ។ តម្លៃរបស់វាមាន ៖
cover- ពង្រីករូបឲ្យពេញផ្ទៃខាងក្រោយ ដោយរក្សាទម្រង់ដើមនៃរូបភាព (អាចកាត់ផ្នែកខ្លះ)contain- ពង្រីករូបឲ្យធំដូចអាចធ្វើបាន ដោយរក្សាទម្រង់ដើម និងបង្ហាញពេញរូបauto- ទំហំដើមនៃរូបភាព- ប្រវែងផ្ដេក ប្រវែងបញ្ឈរ - ឧទាហរណ៍ ៖
100px 50pxឬ50% 100%
ការប្រើ background-size: cover គឺល្អសំរាប់ការបង្កើត hero sections និង banners ដោយផ្ទៃខាងក្រោយនឹងពេញធាតុទាំងស្រុង ។
ការភ្ជាប់ផ្ទៃខាងក្រោយ
អ្នកអាចកំណត់ថាតើផ្ទៃខាងក្រោយត្រូវរំកិលតាមទំព័រ ឬនៅស្ថិតថេរ ដោយប្រើ background-attachment property ។ តម្លៃរបស់វាមាន ៖
scroll- រំកិលតាមទំព័រ (លំនាំដើម)fixed- នៅស្ថិតថេរ មិនរំកិលតាមlocal- រំកិលតាមធាតុ
ផ្ទៃខាងក្រោយជា Gradient
CSS អនុញ្ញាតឲ្យអ្នកបង្កើតផ្ទៃខាងក្រោយជា gradient ដោយមិនចាំបាច់ប្រើរូបភាព ។ មានប្រភេទ gradient ចម្បង២ប្រភេទ ៖
Linear Gradient
ពណ៌ប្ដូរតាមបន្ទាត់ត្រង់ ។
Radial Gradient
ពណ៌ប្ដូរពីកណ្ដាលទៅជុំវិញ ។
ករណីប្រើប្រាស់ជាក់ស្ដែង
1. Card Design
2. Hero Section
3. Pattern Background
ការកំណត់ផ្ទៃខាងក្រោយតាមវិធីខ្លី
property ប៉ុន្មានខាងលើ អាចសរសេរនៅក្នុង background property តែមួយបាន ។ តម្លៃរបស់វា ត្រូវតាមលំដាប់ដូចខាងក្រោម (តែយើងអាចអត់សរសេរមួយណាក៏បានដែរ) ៖
- ពណ៌ (background-color)
- រូបភាព (background-image)
- ទីតាំង/ទំហំ (background-position / background-size) ត្រូវមានសញ្ញា
/ - ច្រំដែល (background-repeat)
- ការភ្ជាប់ (background-attachment)
ការប្រើ shorthand property ជួយសរសេរកូដឲ្យខ្លី និងអានងាយស្រួល ប៉ុន្តែត្រូវប្រាកដថាបានតាមលំដាប់ត្រឹមត្រូវ ។
គន្លឹះសំរាប់ការប្រើ Background
- ប្រើ
background-size: coverសំរាប់ hero sections និង banners - ប្រើ
background-attachment: fixedសំរាប់ parallax effects - រួមបញ្ចូល gradient overlay លើរូបភាពដើម្បីបង្កើនការអានអត្ថបទ
- ប្រើ
rgba()សំរាប់ពណ៌ផ្ទៃខាងក្រោយដែលមានភាពថ្លា - ពិចារណាទំហំឯកសាររូបភាពសំរាប់ការផ្ទុកលឿន
- ប្រើ multiple backgrounds សំរាប់បង្កើតប្រសិទ្ធភាពស្មុគស្មាញ