CSS អចលនទ្រព្យ "តម្លាភាព" - វិធីសាមញ្ញដើម្បីធ្វើឱ្យតំបន់បណ្តាញការរចនាគួរឱ្យចាប់អារម្មណ៍កាន់តែច្រើន

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

ប៉ារ៉ាម៉ែត្របញ្ជាក់ធាតុនៃតម្លាភាព

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

• ភាពស្រអាប់;
• ត្រង;
• PNG-រូបភាពជាផ្ទៃខាងក្រោយមួយ។

តម្លៃអចលនទ្រព្យ CSS "តម្លាភាព" ត្រូវបានផ្លាស់ប្តូរដូចខាងក្រោម: ខ្ពស់ជាងចំនួននេះទាបជាងកម្រិតនៃតម្លាភាពនៃធាតុនេះ។ ភាពស្រអាប់នេះវាប្រែប្រួលពី 0 ទៅ 1 ក្នុងតម្រង - ពី 10 ទៅ 100 ហើយក្រោយមកទៀតត្រូវបានប្រើសម្រាប់កម្មវិធីរុករក Interet ណិ, និងទ្រព្យសម្បត្តិភាពស្រអាប់អនុវត្តទាំងអស់ផ្សេងទៀត។

រូបភាពតម្លាភាព (ផ្លាស់ប្តូរ)

ចូរចាប់ផ្តើមជាមួយនឹងជម្រើសដែលនឹងបង្ហាញឡើងនៅពេលអ្នកផ្លាស់ទីតម្លាភាពធាតុនេះ ដោយអូសកណ្តុរ។

សូមឱ្យយើងពិចារណាអំពីរបៀបដើម្បីបញ្ជាក់ភាពថ្លារបស់រូបភាព។ CSS ដែលផ្តល់នូវជម្រើសពីរ។ ដើម្បីធ្វើដូចនេះអ្នកត្រូវតែចុះឈ្មោះវាដោយផ្ទាល់ក្នុងកូដ HTML ដែលឯកសារដូចខាងក្រោម:

1. បញ្ជាក់ផ្លូវទៅកាន់រូបភាព។
2. យើងបានកំណត់ប៉ារ៉ាម៉ែត្រនៃតម្លាភាពនៅពេលទស្សន៍ទ្រនិចគឺមិនមែនទេ។ ដើម្បីធ្វើដូចនេះយើងប្រើលក្ខណៈសម្បត្តិនៃ onmouseover និង onmouseout ដែលបានចែងពីតម្លៃនៃភាពស្រអាប់និងតម្រង។

លក្ខណៈដូចគ្នាអាចត្រូវបានចែងនៅក្នុង CSS-ឯកសារនិងកូដប្រភពដើម្បីបន្ថែមសេចក្ដីយោងទៅវា។ លទ្ធផលនេះបានបើកចេញដូចគ្នា។

តម្លាភាពនៃអត្ថបទនិងទំព័រប្លុក

ដូចជាសម្រាប់អត្ថបទឬប្លុក (div តម្លាភាព), CSS ផ្តល់នូវជម្រើសរបស់ខ្លួនស្រដៀងគ្នាទៅនឹងការបង្កើតរូបភាពមួយដែលមានតម្លាភាព, អ្នកមានការប្រើ CSS ឯកសារភ្ជាប់ដែលក្នុងនោះប៉ារ៉ាម៉ែត្រដែលចង់បានត្រូវបានកំណត់។ អ្នកអាចចូលទៅនិងវិធីដែលងាយស្រួលមួយ។ នៅពេលដែលអ្នកបានកំណត់រចនាប័ទ្ម div ប្លុករចនាប័ទ្មឬអត្ថបទទំចេញវេជ្ជបញ្ជា html កូដដូចខាងក្រោមដើម្បី onmouseover និង onmouseout ធាតុ។ ជម្រើសទាំងពីរធ្វើការនិងផលិតលទ្ធផលដែលចង់បាន។

ថេរតម្លាភាព

នៅក្នុងករណីមួយចំនួន, តម្លាភាពនៃវត្ថុធាតុការរចនាមួយឬអត្ថបទដែលអ្នកចង់កំណត់នៅលើមូលដ្ឋានដែលកំពុងបន្តមួយ។ នៅក្នុងស្ថានភាពនេះ, ដំណោះស្រាយគឺសូម្បីតែងាយស្រួលជាងនៅពេលដែលអ្នកដាក់ទស្សន៍ទ្រនិចកណ្តុរ។

ធាតុ css ឱ្យមានតម្លាភាពនឹងត្រូវបានផ្ដល់ដោយកូដដូចខាងក្រោម។ នៅក្នុងរចនាប័ទ្ម div ប្លុកចេញវេជ្ជបញ្ជាតម្លៃសម្រាប់ផ្ទៃខាងក្រោយ (ឧ: # ff8800), ភាពស្រអាប់ (ឧ, 0.5) និងទទឹង (ទទឹង) និងចន្លោះ (ចន្លោះ) ។

សម្រាប់រូបភាពនេះត្រូវបានធ្វើឱ្យតម្លៃលេខកូដនិងតម្រងភាពស្រអាប់និងបញ្ជាក់ផ្លូវទៅកាន់រូបភាព។

RGBA-វិធីសាស្រ្ត

តម្លាភាពអាចត្រូវបានអនុវត្តទៅណ៍មូលដ្ឋាននៃធាតុរចនាណាមួយ: មានជម្រើសផ្សេងទៀតសម្រាប់ការប្រើ CSS អចលនទ្រព្យនេះ។ វាប្រើវិធីសាស្រ្ត RGBA ។ អក្សរបីដំបូងឈរសម្រាប់ណ៍ជាមូលដ្ឋាន (ក្រហម, បន្ទុះ, ខៀវ) និងចុងក្រោយ - អាល់ហ្វាដែលកំណត់កម្រិតនៃតម្លាភាព។ ការប្រើ RGBA-ទ្រង់ទ្រាយណែនាំតម្លាភាពចង្អុលវាទៅខ្ទង់ចុងក្រោយ។ ឧទាហរណ៍ដូចជា: ផ្ទៃខាងក្រោយ: rgba (240,2,33,0.4035) ។

សេចក្តីសន្និដ្ឋាន

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