តើធ្វើដូចម្តេចដើម្បីពង្រីករូបភាពផ្ទៃខាងក្រោយដើម្បីសមទំព័របណ្តាញ

ផ្តល់ឱ្យអ្នកនូវចំណាប់អារម្មណ៍មើលឃើញតាមអ៊ីនធឺរណែត

រូបភាពគឺជាផ្នែកមួយដ៏សំខាន់នៃការរចនាវេបសាយទាក់ទាញ។ នេះរួមបញ្ចូលទាំងការប្រើរូបភាពផ្ទៃខាងក្រោយ។ ទាំងនេះគឺជារូបភាពនិងក្រាហ្វិកដែលត្រូវបានប្រើ នៅពីក្រោយ តំបន់នៃទំព័រដែលផ្ទុយនឹងរូបភាពដែលត្រូវបានបង្ហាញជាផ្នែកនៃទំព័រមាតិកា។ រូបភាពផ្ទៃខាងក្រោយទាំងនេះអាចបន្ថែមការចាប់អារម្មណ៍លើទំព័រនិងជួយអ្នកឱ្យសម្រេចនូវការរចនាដែលអ្នកអាចស្វែងរកនៅលើទំព័រ។

ប្រសិនបើអ្នកចាប់ផ្តើមធ្វើការជាមួយរូបភាពផ្ទៃខាងក្រោយអ្នកប្រាកដជានឹងរត់ចូលទៅក្នុងសេណារីយ៉ូដែលអ្នកចង់បានរូបភាពដើម្បីពង្រីកឱ្យសមនឹងទំព័រ។

នេះជាការពិតជាពិសេសសម្រាប់គេហទំព័រឆ្លើយតបដែលកំពុង ត្រូវបានបញ្ជូនទៅឧបករណ៍និងអេក្រង់ធំទូលាយ ។

បំណងប្រាថ្នានេះដើម្បីពង្រីករូបភាពផ្ទៃខាងក្រោយគឺជាបំណងប្រាថ្នាដ៏សាមញ្ញមួយសម្រាប់អ្នករចនាគេហទំព័រពីព្រោះគ្រប់រូបភាពមិនត្រូវគ្នានឹងទំហំគេហទំព័រទេ។ ជំនួសឱ្យការកំណត់ទំហំថេររូបភាពដែលពង្រីករូបរាងរបស់វាអនុញ្ញាតឱ្យវាបត់បែនដើម្បីអោយសមនឹងទំព័រមិនថា បង្អួចកម្មវិធីរុករក មានលក្ខណៈទូលំទូលាយឬតូចចង្អៀត។

មធ្យោបាយដ៏ល្អបំផុតដើម្បីពង្រីករូបភាពឱ្យសមនឹងផ្ទៃខាងក្រោយនៃទំព័រមួយគឺត្រូវប្រើលក្ខណសម្បត្តិ CSS3 សម្រាប់ទំហំផ្ទៃខាងក្រោយ។ នេះគឺជាឧទាហរណ៍មួយដែលប្រើរូបភាពផ្ទៃខាងក្រោយសម្រាប់រូបរាងរបស់ទំព័រនិងដែលកំណត់ទំហំរហូតដល់ 100% ដូច្នេះវានឹងលាតសន្ធឹងតាមអេក្រង់។

រាងកាយ {
ផ្ទៃខាងក្រោយ: url (bgimage.jpg) no-repeat;
ទំហំផ្ទៃខាងក្រោយ: 100%;
}

យោងទៅតាម caniuse.com អចលនទ្រព្យនេះដំណើរការនៅក្នុង IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ និងលើកម្មវិធីរុករកចល័តទាំងអស់។ នេះគ្របដណ្តប់អ្នកសម្រាប់កម្មវិធីរុករកទំនើបទាំងអស់ដែលអាចប្រើបាននៅថ្ងៃនេះដែលមានន័យថាអ្នកគួរតែប្រើទ្រព្យសម្បត្តិនេះដោយមិនបារម្ភថាវានឹងមិនដំណើរការលើអេក្រង់របស់អ្នកដទៃទេ។

Faking Background Background នៅក្នុងកម្មវិធីរុករកចាស់

វាមិនទំនងទេដែលអ្នកត្រូវការគាំទ្រកម្មវិធីរុករកទាំងឡាយដែលចាស់ជាង IE9 ប៉ុន្តែសូមសន្មត់ថាអ្នកព្រួយបារម្ភថា IE8 មិនគាំទ្រលក្ខណសម្បត្តិនេះទេ។ ក្នុងករណីនេះអ្នកអាចក្លែងបន្លំផ្ទៃខាងក្រោយបាន។ ហើយអ្នកអាចប្រើ បុព្វបទកម្មវិធីរុករក សម្រាប់ Firefox 3.6 (-moz-background-size) និង Opera 10.0 (-o-background-size) ។

វិធីងាយស្រួលបំផុតដើម្បីក្លែងបន្លំរូបភាពផ្ទៃខាងក្រោយគឺដើម្បីពង្រីកវានៅលើទំព័រទាំងមូល។ បន្ទាប់មកអ្នកមិនបញ្ចប់ដោយកន្លែងទំនេរបន្ថែមឬត្រូវព្រួយបារម្ភថាអត្ថបទរបស់អ្នកសមនៅក្នុងតំបន់ដែលលាតសន្ធឹង។ នេះជារបៀបធ្វើវា:

លេខសម្គាល់ = "bg" />

1. ដំបូងត្រូវប្រាកដថាកម្មវិធីរុករកទាំងអស់មានកម្ពស់ 100% រឹម 0 និង 0 នៅលើធាតុ HTML និង BODY ។ ដាក់ដូចខាងក្រោមនៅក្នុងក្បាលឯកសារ HTML របស់អ្នក:

2. បន្ថែមរូបភាពដែលអ្នកចង់ធ្វើជាផ្ទៃខាងក្រោយជាធាតុដំបូងនៃទំព័រវ៉េបនិងឱ្យវា លេខសំគាល់ នៃ "bg":

3. ដាក់ រូបភាពផ្ទៃខាងក្រោយ ដូច្នេះវាត្រូវបានជួសជុលនៅខាងលើនិងខាងឆ្វេងនិងមានទទឹង 100% និងកំពស់ 100% ។ បន្ថែមនេះទៅសន្លឹករចនាប័ទ្មរបស់អ្នក:

   img # bg {
   ទីតាំង: ថេរ
   កំពូល: 0;
   ខាងឆ្វេង: 0;
   ទទឹង: 100%;
   កម្ពស់: 100%;
   }

4. បន្ថែមមាតិការបស់អ្នកទាំងអស់ទៅទំព័រខាងក្នុងនៃធាតុ DIV ដែលមានលេខសម្គាល់នៃ "មាតិកា" ។ បន្ថែម DIV ខាងក្រោមរូបភាព:

   មាតិការបស់អ្នកទាំងអស់នៅទីនេះ - រាប់បញ្ចូលទាំងផ្នែកក្បាលកថាខណ្ឌជាដើម។

   ចំណាំ: វាគួរឱ្យចាប់អារម្មណ៍ក្នុងការមើលទំព័ររបស់អ្នកឥឡូវនេះ។ រូបភាពគួរបង្ហាញបង្ហាញប៉ុន្តែមាតិការបស់អ្នកបាត់អស់ហើយ។ ហេតុអ្វី? ពីព្រោះរូបភាពផ្ទៃខាងក្រោយមានកំពស់ 100% ហើយផ្នែកមាតិកាគឺស្ថិតនៅ ពីក្រោយ រូបភាពនៅក្នុងលំហូរនៃឯកសារ - កម្មវិធីរុករកភាគច្រើននឹងមិនបង្ហាញវាទេ។
   
5. កំណត់ទីតាំងមាតិការបស់អ្នកដូច្នេះវាមានទំនាក់ទំនងនិងមាន សន្ទស្សន៍ z- 1. វានឹងនាំវានៅខាងលើរូបភាពផ្ទៃខាងក្រោយក្នុងកម្មវិធីរុករកដែលមានលក្ខណៈស្តង់ដារ។ បន្ថែមនេះទៅសន្លឹករចនាប័ទ្មរបស់អ្នក:

   # មាតិកា {
   ទីតាំង: ទំនាក់ទំនង
   z- index: 1;
   }

1. ប៉ុន្តែអ្នកមិនបានធ្វើទេ។ កម្មវិធី Internet Explorer 6 មិនមានលក្ខណៈស្តង់ដារហើយនៅតែមានបញ្ហាមួយចំនួន។ មានវិធីជាច្រើនដើម្បីលាក់ CSS ពីគ្រប់កម្មវិធីរុករកប៉ុន្តែ IE6 ប៉ុន្តែងាយស្រួលបំផុត (ហើយយ៉ាងហោចណាស់អាចបង្កឱ្យមានបញ្ហាផ្សេងៗទៀត) គឺត្រូវប្រើយោបល់តាមលក្ខខណ្ឌ។ ដាក់ដូចខាងក្រោមបន្ទាប់ពីរចនាប័ទ្មសន្លឹករបស់អ្នកនៅក្នុងក្បាលឯកសាររបស់អ្នក:

2. នៅក្នុងមតិយោបល់ដែលបានបន្លិចបញ្ចូលសន្លឹករចនាប័ទ្មមួយផ្សេងទៀតដែលមានរចនាប័ទ្មខ្លះដើម្បីឱ្យ IE 6 លេងបានល្អ:

3. ត្រូវប្រាកដថាសាកល្បងនៅក្នុង IE 7 និង IE 8 ផងដែរ។ អ្នកប្រហែលជាត្រូវកែតម្រូវយោបល់ដើម្បីគាំទ្រពួកគេផងដែរ។ ទោះយ៉ាងណាវាដំណើរការនៅពេលខ្ញុំសាកល្បងវា។

យល់ព្រម - នេះគឺជាការលើសលុប WAY ។ គេហទំព័រតិចតួចណាស់ដែលត្រូវការជំនួយ IE 7 ឬ 8 ទៀតហើយ IE6 តិចជាង!

បែបនេះវិធីសាស្រ្តនេះត្រូវបានចាស់និងទំនងជាមិនចាំបាច់សម្រាប់អ្នក។ ខ្ញុំទុកវានៅទីនេះជាគំរូនៃការចង់ដឹងអំពីរបៀបដែលរឿងរ៉ាវលំបាកជាងមុនទាំងអស់មុនពេលកម្មវិធីរុករករបស់យើងទាំងអស់ដែលបានលេងយ៉ាងល្អជាមួយគ្នា!

ការក្លែងបន្លំរូបភាពនៅលើផ្ទៃតូច

អ្នកអាចប្រើបច្ចេកទេសប្រហាក់ប្រហែលដើម្បីក្លែងរូបភាពផ្ទៃខាងក្រោយវែងៗនៅលើ DIV ឬធាតុផ្សេងទៀតនៅលើគេហទំព័ររបស់អ្នក។ នេះជាល្បិចកលបន្តិចដែលអ្នកត្រូវប្រើទីតាំងដាច់ខាតឬមានបញ្ហាគម្លាតចម្លែកសម្រាប់ផ្នែកផ្សេងទៀតនៃទំព័ររបស់អ្នក។

1. ដាក់រូបភាពនៅលើទំព័រដែលខ្ញុំចង់ប្រើជាផ្ទៃខាងក្រោយ។

2. នៅក្នុងសន្លឹករចនាប័ទ្មកំណត់ទទឹងនិងកម្ពស់សម្រាប់រូបភាព។ ចំណាំអ្នកអាចប្រើភាគរយសម្រាប់ទទឹងឬកម្ពស់ប៉ុន្តែខ្ញុំយល់ថាវាងាយស្រួលក្នុងការលៃតម្រូវតម្លៃប្រវែងសម្រាប់កម្ពស់។

   img # bg {
   ទទឹង: 20 អោន;
   កម្ពស់: 30 ម;
   }

3. ដាក់មាតិការបស់អ្នកនៅក្នុង div ជាមួយលេខសម្គាល់ "មាតិកា" ដូចដែលយើងបានធ្វើនៅខាងលើ:

   មាតិការបស់អ្នកទាំងអស់នៅទីនេះ

4. រចនាប័ទ្មមាតិកាដើម្បីឱ្យមានទទឹងនិងកម្ពស់ដូចរូបភាពផ្ទៃខាងក្រោយដូចគ្នា:

   div # content {
   ទទឹង: 20 អោន;
   កម្ពស់: 30 ម;
   }

5. បន្ទាប់ដាក់ទីតាំងមាតិកាឡើងដល់កម្ពស់ដូចគ្នានឹងរូបភាព។ ដូច្នេះប្រសិនបើរូបភាពរបស់អ្នកមាន 30 អ៊ីញអ្នកនឹងមានរចនាបថកំពូល: -30em; កុំភ្លេចដាក់សន្ទស្សន៍ z នៃ 1 នៅលើមាតិកា។

   # មាតិកា {
   ទីតាំង: ទំនាក់ទំនង
   កំពូល: -30em;
   z- index: 1;
   ទទឹង: 20 អោន;
   កម្ពស់: 30 ម;
   }

6. បន្ទាប់មកបន្ថែមនៅក្នុងសន្ទស្សន៍ Z-1 សម្រាប់អ្នកប្រើ IE 6 ដូចដែលអ្នកបានធ្វើខាងលើ:

ជាថ្មីម្តងទៀតដោយមានទំហំផ្ទៃខាងក្រោយដែលកំពុងរីករាយជាមួយការគាំទ្រកម្មវិធីរុករកទូលំទូលាយវាធ្វើហើយវិធីសាស្រ្តនេះក៏ទំនងជាមិនចាំបាច់និងបង្ហាញជាផលិតផលនៃសម័យកាលមួយ។ ប្រសិនបើអ្នកចង់ប្រើវិធីសាស្រ្តនេះគ្រាន់តែត្រូវប្រាកដថាសាកល្បងវាក្នុងកម្មវិធីរុករកច្រើនតាមដែលអ្នកអាចធ្វើបាន។

ហើយប្រសិនបើមាតិការបស់អ្នកផ្លាស់ប្តូរទំហំអ្នកនឹងត្រូវផ្លាស់ប្តូរទំហំនៃធុងនិងរូបភាពផ្ទៃខាងក្រោយរបស់អ្នកបើមិនដូច្នេះទេអ្នកនឹងទទួលបានលទ្ធផលប្លែកៗ។