ការប្រើ CSS ជាមួយរូបភាព

រចនាប័ទ្មរូបភាពរបស់អ្នកនិងប្រើរូបភាពក្នុងរចនាប័ទ្ម

មនុស្សជាច្រើនប្រើ CSS ដើម្បីលៃតម្រូវអត្ថបទ, ផ្លាស់ប្តូរពុម្ពអក្សរ, ពណ៌, ទំហំនិងច្រើនទៀត។ ប៉ុន្តែរឿងមួយដែលមនុស្សជាច្រើនតែងតែភ្លេចនោះគឺអ្នកអាចប្រើ CSS ជាមួយរូបភាពផងដែរ។

ការផ្លាស់ប្តូររូបភាពខ្លួនឯង

CSS អនុញ្ញាតឱ្យអ្នកលៃតម្រូវរបៀបដែលរូបភាពបង្ហាញនៅលើទំព័រ។ នេះអាចមានប្រយោជន៍ពិតប្រាកដសម្រាប់រក្សាទំព័ររបស់អ្នកអោយស្របគ្នា។ ដោយកំណត់រចនាប័ទ្មលើរូបភាពទាំងអស់អ្នកបង្កើតរូបរាងស្តង់ដារសម្រាប់រូបភាពរបស់អ្នក។ រឿងមួយចំនួនដែលអ្នកអាចធ្វើបាន:

• បន្ថែមស៊ុមឬគ្រោងជុំវិញរូបភាព
• យកស៊ុមពណ៌ដែលនៅជុំវិញរូបភាពភ្ជាប់
• ការលៃតម្រូវទទឹងនិង / ឬកម្ពស់របស់រូបភាព
• បន្ថែមស្រមោលទម្លាក់
• បង្វិលរូបភាព
• ផ្លាស់ប្តូររចនាប័ទ្មនៅពេលរូបភាពត្រូវបានរកឃើញ

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

img {
ស៊ុម: 1px ខ្មៅរឹង;
ចន្លោះ: 5px;
}

វាជាគំនិតដ៏ល្អក្នុងការ ភ្ជាប់រូបភាពមិនតុបតែង ជានិច្ចនៅពេលអាចធ្វើទៅបាន។ ប៉ុន្តែនៅពេលដែលអ្នកធ្វើសូមចាំថាកម្មវិធីរុករកច្រើនបំផុតបន្ថែមស៊ុមពណ៌នៅជុំវិញរូបភាព។ សូម្បីតែអ្នកប្រើលេខកូដខាងលើដើម្បីផ្លាស់ប្តូរស៊ុមតំណនឹងបដិសេធថាលុះត្រាតែអ្នកដកចេញឬផ្លាស់ប្តូរស៊ុមនៅលើតំណផងដែរ។ ដើម្បីធ្វើដូចនេះអ្នកគួរតែប្រើក្បួនកូនសោ CSS ដើម្បីដកចេញឬផ្លាស់ប្តូរស៊ុមជុំវិញរូបភាពដែលបានភ្ជាប់:

img> a {
ព្រំដែន: គ្មាន;
}

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

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

img {
ទទឹង: 50%;
កម្ពស់: ស្វ័យប្រវត្តិ
}

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

ខណៈពេលដែលលក្ខណសម្បត្តិវត្ថុ CSS3 និងវត្ថុទីតាំងមិនត្រូវបានគាំទ្រយ៉ាងទូលំទូលាយនៅឡើយទេមានលក្ខណៈសម្បត្តិ CSS3 ផ្សេងទៀតដែលត្រូវបានគាំទ្រយ៉ាងល្អនៅក្នុងកម្មវិធីរុករកទំនើបភាគច្រើនដែលអ្នកអាចប្រើដើម្បីកែប្រែរូបភាពរបស់អ្នក។ អ្វីដែលដូចជាស្រមោលកាត់ជ្រុងមូលនិងការផ្លាស់ប្តូរដើម្បីបង្វិលបញ្ឆៀងឬផ្លាស់ទីរូបភាពរបស់អ្នកទាំងអស់ឥឡូវធ្វើការនៅក្នុងកម្មវិធីរុករកទំនើបបំផុត។ បន្ទាប់មកអ្នកអាចប្រើការផ្លាស់ប្តូរ CSS ដើម្បីធ្វើឱ្យរូបភាពផ្លាស់ប្តូរនៅពេលដែលគ្របដណ្តប់លើឬចុចឬបន្ទាប់ពីរយៈពេល។

ការប្រើរូបភាពជាផ្ទៃខាងក្រោយ

CSS ធ្វើឱ្យមានភាពងាយស្រួលក្នុងការបង្កើតផ្ទៃខាងក្រោយពុម្ពអក្សរជាមួយនឹងរូបភាពរបស់អ្នក។

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

រាងកាយ {
background-image: url (background.jpg);
}

ផ្លាស់ប្តូរឧបករណ៍ជ្រើសរាងកាយទៅធាតុជាក់លាក់នៅលើទំព័រដើម្បីដាក់ផ្ទៃខាងក្រោយលើធាតុតែមួយ។

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

សរសេរផ្ទៃខាងក្រោយម្តងទៀត: repeat-x; ដើម្បីក្បឿងរូបភាពផ្ដេកនិងផ្ទៃខាងក្រោយម្តងទៀត: repeat-y; ដើម្បីក្បឿងបញ្ឈរ។ ហើយអ្នកអាចដាក់រូបភាពផ្ទៃខាងក្រោយរបស់អ្នកជាមួយលក្ខណសម្បត្តិទីតាំងខាងក្រោយ។

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

HTML5 ជួយរចនារូបភាព

ធាតុគំនូរក្នុង HTML5 គួរតែដាក់នៅជុំវិញរូបភាពណាមួយដែលអាចឈរនៅតែឯងក្នុងឯកសារ។ វិធីមួយដើម្បីគិតអំពីវាគឺប្រសិនបើរូបភាពអាចលេចឡើងក្នុងឧបសម្ព័ន្ធបន្ទាប់មកវាគួរតែស្ថិតនៅខាងក្នុងធាតុរូបរាង។ បន្ទាប់មកអ្នកអាចប្រើធាតុនោះនិងធាតុ FIGCAPTION ដើម្បីបន្ថែមរចនាប័ទ្មរូបភាពរបស់អ្នក។