រូបភាពផ្ទៃខាងក្រោយរបស់រាងកាយធ្វើបានយ៉ាងងាយស្រួល

html

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

តើធ្វើដូចម្តេច?

  1. ស្វែងយល់ថាតើមាតិការបស់អ្នកទូលាយប៉ុនណា។ ឧទាហរណ៍ៈ 750px ។
  2. បង្កើតរូបភាពនៅក្នុងកម្មវិធីបង្ហាញរូបភាពរបស់អ្នក (ខ្ញុំប្រើគំនូរ) ធំជាងតំបន់មាតិកា។ ឧទាហរណ៍៖ ៨០០ ភីច។
  3. កំណត់ផ្ទៃខាងក្រោយនៃរូបភាពទៅផ្ទៃខាងក្រោយដែលអ្នកចង់មាននៅផ្នែកម្ខាងនៃប្លក់។
  4. បន្ថែមតំបន់ពណ៌សលើផ្ទៃខាងក្រោយ។
  5. លាបស្រមោលលើតំបន់ពណ៌សដែលលាតសន្ធឹងពីផ្នែកណាមួយនៃតំបន់។
  6. កំណត់ទំហំផ្ទៃដីទទឹង ១ ភីកសែលគិតជាកំពស់។ វានឹងធ្វើឱ្យរូបភាពទាញយកស្រស់ស្អាតនិងបង្រួមសម្រាប់ការបង្ហាញរហ័ស។
  7. បង្ហាញរូបភាព។

នេះជាវិធីដែលខ្ញុំបានសាងសង់វាដោយប្រើ Illustrator (ចំណាំថាខ្ញុំមានផ្ទៃដីដាំដុះខ្ពស់ជាងនេះ។ អញ្ចឹងអ្នកអាចមើលឃើញអ្វីដែលខ្ញុំកំពុងធ្វើ)៖
សាវតាជាមួយគំនូរ

នេះជាឧទាហរណ៍ពីរបៀបដែលលទ្ធផលនឹងមើលទៅរូបភាពផ្ទៃខាងក្រោយ៖
ឧទាហរណ៍នៃរូបភាពផ្ទៃខាងក្រោយ

នេះជាវិធីដើម្បីអនុវត្តរូបភាពដោយប្រើស្លាករចនាប័ទ្មរាងកាយរបស់អ្នកនៅក្នុងរបស់អ្នក ជា CSS ដាក់។

ផ្ទៃខាងក្រោយ: # B2B2B2 url ('រូបភាព / bg.gif') កណ្តាលម្តងទៀត - អ៊ី;

នេះគឺជាការបង្ហាញនៃស្លាករចនាប័ទ្មផ្ទៃខាងក្រោយ:

  • # B2B2B2 - កំណត់ពណ៌ផ្ទៃខាងក្រោយទាំងមូលនៃទំព័រ។ ក្នុងឧទាហរណ៍នេះវាប្រផេះដើម្បីផ្គូផ្គងពណ៌ប្រផេះនៅលើរូបភាពផ្ទៃខាងក្រោយ។
  • url ('រូបភាព / bg.gif') - កំណត់រូបភាពផ្ទៃខាងក្រោយដែលអ្នកចង់ប្រើ។
  • repeat-y - កំណត់រូបភាពដើម្បីធ្វើឡើងវិញលើអ័ក្ស y ។ ដូច្នេះរូបភាពផ្ទៃខាងក្រោយនឹងធ្វើឡើងវិញពីកំពូលទៅបាតនៃទំព័រ។
  • កណ្តាល - កំណត់រូបភាពនៅកណ្តាលទំព័រ។

ស្រស់ស្អាតនិងងាយស្រួល…រូបភាពមួយស្លាកមួយ!

2 យោបល់

  1. 1
  2. 2

តើ​អ្នក​គិត​អ្វី?

តំបន់បណ្ដាញនេះប្រើ Akismet ដើម្បីកាត់បន្ថយសារឥតបានការ។ សិក្សាអំពីរបៀបដែលទិន្នន័យរបស់អ្នកត្រូវបានដំណើរការ.