របៀបបន្ថែមរូបភាពផ្ទៃខាងក្រោយប្រកបដោយប្រតិកម្មចំពោះគេហទំព័រ

នេះជារបៀបបន្ថែមរូបភាពរចនាឆ្លើយតបដោយប្រើ CSS

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

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

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

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

ទំហំផ្ទៃខាងក្រោយ: គម្រប;

លក្ខណសម្បត្តិពាក្យគន្លឹះគ្របដណ្តប់កម្មវិធីរុករកដើម្បីធ្វើមាត្រដ្ឋានរូបភាពឱ្យសមនឹងបង្អួចដោយមិនគិតពីទំហំធំឬតូចដែលបង្អួចនោះទទួលបាន។ រូបភាពត្រូវបានធ្វើមាត្រដ្ឋានដើម្បីគ្របដណ្តប់លើអេក្រង់ទាំងមូលប៉ុន្តែសមាមាត្រនិងសមាមាត្រដើមត្រូវបានរក្សាទុកដដែលការពាររូបភាពរបស់វាពីការបង្ខូចទ្រង់ទ្រាយ។

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

របៀបប្រើទំហំផ្ទៃខាងក្រោយ: គម្រប;

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

នៅពេលដែលអ្នកធ្វើដូច្នេះសូមប្រាកដថាត្រូវ រៀបចំរូបភាពទាំងនេះ ឱ្យបានត្រឹមត្រូវ សម្រាប់ល្បឿនទាញយកនិងការបញ្ជូនបណ្តាញ ។ នៅទីបញ្ចប់អ្នកត្រូវស្វែងរកមធ្យោបាយដ៏សប្បាយរីករាយរវាងទំហំនិងគុណភាពរូបភាពធំទូលាយហើយទំហំឯកសារសមល្មមសម្រាប់ល្បឿនទាញយក។

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

ផ្ទុកឡើងរូបភាពរបស់អ្នកទៅម៉ាស៊ីនបណ្តាញរបស់អ្នកនិងបន្ថែមវាទៅ CSS របស់អ្នកជារូបភាពផ្ទៃខាងក្រោយ:

background-image: url (fireworks-over-wdw.jpg);
background-repeat: no-repeat;
ប្រវត្តិសាស្រ្តទីតាំង: កណ្តាល;
ឯកសារភ្ជាប់ផ្ទៃខាងក្រោយ: ថេរ;

បន្ថែមកម្មវិធីបុព្វបទ CSS ដំបូង:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: គម្រប;

បន្ទាប់មកបន្ថែមលក្ខណសម្បត្តិ CSS:

ទំហំផ្ទៃខាងក្រោយ: គម្រប;

ការប្រើរូបភាពខុសៗគ្នាដែលបណ្តាលឱ្យមានការប្រែប្រួលឧបករណ៍

ខណៈពេលដែលការរចនាឆ្លើយតបសម្រាប់ផ្ទៃតុឬបទពិសោធន៏កុំព្យូទ័រយួរដៃមានសារៈសំខាន់ភាពខុសគ្នានៃឧបករណ៍ដែលអាចចូលដំណើរការគេហទំព័របានកើនឡើងគួរឱ្យកត់សម្គាល់ហើយទំហំអេក្រង់ធំជាងមុនបានភ្ជាប់មកជាមួយនោះ។

ដូចដែលបានរៀបរាប់ខាងលើការផ្ទុករូបភាពផ្ទៃខាងក្រោយឆ្លើយតបយ៉ាងខ្លាំងនៅលើទូរស័ព្ទស្មាតហ្វូនឧទាហរណ៍មិនមែនជាការរចនាដែលមានប្រសិទ្ធិភាពឬមានប្រេកង់។

សិក្សាពីរបៀបដែលអ្នកអាចប្រើ សំណួរប្រព័ន្ធផ្សព្វផ្សាយ ដើម្បីបម្រើរូបភាពដែលនឹងត្រូវនឹងឧបករណ៍ដែលពួកគេនឹងត្រូវបានបង្ហាញនិងបង្កើនភាពប្រសើរឡើងនៃគេហទំព័ររបស់អ្នកជាមួយឧបករណ៍ចល័ត។

អត្ថបទដើមរបស់ Jennfier Krynin ។ កែសម្រួលដោយលោក Jeremy Girard 9/12/17