សីហា
CSS3 អាចដាក់ Background បានច្រើន
កែសម្រួលឡើងវិញ ថ្ងៃទី ១៦ ខែសីហា ឆ្នាំ ២០១៦
កាលពីលេខមុនយើងបានលើកយកការប្រើ CSS 3 សម្រាប់បង្កើតចលនារីករួម ។ ក្នុងលេខនេះយើងនឹងលើកយកពីការប្រើ Multi Background របស់ CSS 3 សម្រាប់ដាក់រូបភាពបានច្រើនទៅក្នុង <div> ឬ HTML element ណាមួយ ។
♦ ការដាក់ Background ជាមួយ CSS 3
យើងចង់ដាក់រូប ២ ខាងក្រោមជា background របស់ div តែមួយ ។
រូបទី ១
រូបភាពទី ២
ហើយយើងចង់បានលទ្ធផលដូចរូបខាងក្រោមនេះ៖
កាលពីនៅ CSS 1 ប្រសិនបើយើងចងប្រើ Background ដែលមានច្រើនបែបនេះយើងត្រូវប្រើ Class ពីរទើបអាចបង្ហាញបានហើយពិបាកក្នុងការកំណត់ទីតាំងរបស់ រូបភាព គឺត្រូវកំណត់ z-index ទៅឲ្យរូបចៀម នោះ ដើម្បីឲ្យវានៅពីលើរូបទេសភាព ហើយត្រូវកំណត់ទីតាំងស្ថិតនៅខាងស្ដាំផ្នែកខាងក្រោមទៀតផង ។ តែប្រសិនបើអ្នកប្រើ Multi Background របស់ CSS 3 វិញអ្នកមានលក្ខណៈងាយស្រួលក្នុងការ ហៅរូបភាពច្រើនមកប្រើនៅក្នុង Class តែមួយ មិនតែប៉ុណ្ណោះអ្នកអាចកំណត់ទីតាំង របស់រូបទាំងនោះបានទៀតផង ។
♦ កូដនៃការប្រើ Multi Background របស់ CSS3
នៅបន្ទាត់ទី ៧ យើងបង្កើត Class មួយរបស់ CSS ឈ្មោះ back ដែលក្នុងនោះយើងក៏បានកំណត់ Properties ទៅឲ្យ Class ដូចខាងក្រោម ៖
- width:500px ទទឺង 500px
- height:250px កម្ពស់ 250px
- text-align: center: តម្រឹមអក្សរឲ្យនៅកណ្តាល
- background-image: url (img/sheep.png) , url (img/betweengrassandsky.png) ; ធ្វើការទាញរូបភាពចំនួនពីរ ទី ១ គឺ រូបចៀម និង រូបទី ២ គឹ រូបទេសភាព ។
- background-position: right bottom, left top ចំពោះទីតាំង right និង bottom គឺជាទីតាំងរបស់រូបចៀម ព្រោះរូបចៀមជារូបទី ១ ដែលយើងបានដាក់នៅក្នុង Background-Image ដូចនេះវា ត្រូវនឹងលំដាប់របស់ រូបភាពនោះ ចំណែកឯ left និង top ជាទីតាំងរបស់រូបទេសភាពនោះ វាត្រូវនឹងលំដាប់ទីពីរ ។
- background-repeat: no-repeat: ជាការកំណត់មិនឲ្យរូបភាពនោះធ្វើការ Repeat នៅក្នុង Block នោះ ។
♦ ការហៅ CSS 3 មកប្រើក្នុង HTML
ចំពោះការហៅ CSS មកប្រើនៅក្នុង HTML ជាការងាយស្រួលដោយសារអ្នកបានបង្កើត Class back នៅក្នុង CSS ដូចនេះការហៅគឺគ្រាន់តែយក tag Div មកប្រើរួចដាក់ Class=”back” នោះមានន័យថាអ្នក បានហៅ Class Back នៅក្នុង CSS មកប្រើ ។
<div class=”Back”></div>
ចំណាំ ៖
- CSS 3 (Multi Background) វាអាចដំណើរការជាមួយ web browser ចាប់ពី IE 9, Firefox 3.6, Opera 10.5, Safari 1.0 និង Chrome 1.3 ឡើង ។
- ចំពោះ CSS Script ខាងលើយើងក៏អាចសរសេរវានៅក្នុង Properties background តែមួយក៏បាន ដែរ ។ ដោយសារ background ជា Properties រួមមួយរបស់ background-image, Background-color, background-repeat,background-attachment និង background-position យើងអាចសរសេរបានដូចខាងក្រោម ៖
background:color image repeat attachment position;
ដូចនេះយើងអាចសរសេរបាន ៖
background: url (img/sheep.png) ,url (img/betweengrassandsky.png) right bottom, left top no-repeat ;
ដើម្បីជំនួស ៖
background-image: url (img/sheep.png) ,url (img/betweengrassandsky.png) ;
background-position: right bottom, left top;
background-repeat: no-repeat;
♦ រៀបរៀងអត្ថបទដោយ ៖ លោក អ៊ូ ប៊ុនដេត និង កែសម្រួលអត្ថបទឡើងវិញដោយ ៖ លោក សំ រិទ្ឋី
♦ ដកស្រង់ចេញពីទស្សនាវដ្ដី អាន "ANT" ច្បាប់ទី ២៩ ចេញផ្សាយខែ សីហា ឆ្នាំ ២០១១
សម្រាប់ព័ត៌មានទំនាក់ទំនងមកយើងខ្ញុំ ៖ លេខទូរសព្ទ ០១០ / ០១៦ ៦៦៦ ៦៥៣
ឬ Facebook: https://www.facebook.com/anttrainning
Facebook Page: ANT Magazine
Facebook Group: https://www.facebook.com/groups/ANTTrGroup/
website: www.antkh.com
មតិ និងយោបល់ទៅលើអត្ថបទនេះ (តាម Facebook)
ខាងក្រោមនេះជាយោបល់ផ្សេងៗរបស់អ្នកទស្សនា