តម្លាភាពផ្ទៃខាងក្រោយជា CSS ។ ផ្ទៃខាងក្រោយមានតម្លាភាពឬអត្ថបទជាមួយជា CSS

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

ផ្ទៃខាងក្រោយដែលបានកំណត់ដោយសំណុំនៃគុណលក្ខណៈមួយ (ផ្ទៃខាងក្រោយរូបភាព, ផ្ទៃខាងក្រោយទីតាំង , ផ្ទៃខាងក្រោយទំហំផ្ទៃខាងក្រោយ-ម្តងទៀត, ផ្ទៃខាងក្រោយ-ឯកសារភ្ជាប់, ផ្ទៃខាងក្រោយ-ប្រភពដើម, ផ្ទៃខាងក្រោយ-ឈុតផ្ទៃខាងក្រោយ-color), គ្នានៃការដែលអាចត្រូវបានផ្ដល់ដោយឡែកពីគ្នាឬរួមបញ្ចូលគ្នានៅក្រោមគុណលក្ខណៈ ផ្ទៃខាងក្រោយ។ សូមឱ្យយើងពិនិត្យមើលគ្នានៃពួកគេនៅក្នុងលម្អិត។

ផ្ទៃណ៍គុណលក្ខណៈ

នៅក្នុង CSS, ផ្ទៃខាងក្រោយ អាចត្រូវបានកំណត់នៅក្នុងវិធីជាច្រើន: ដោយប្រើលេខកូដគោលដប់ប្រាំមួយឈ្មោះណ៍ឬធាតុ RGB ។ ក្នុង CSS3 វាបានក្លាយជាអាចធ្វើទៅបានដើម្បីប្រើជម្រើស RGB-ថតជាមួយ RGBA ជំនួសឱ្យការ។

លេខកូដណ៍ត្រូវបានកត់ត្រានៅក្នុងគោលដប់ប្រាំមួយអចលនទ្រព្យបន្ទាប់ពីបន្ទះឈើនេះ: ផ្ទៃខាងក្រោយ-color: # FFDAB9 ។ ប្រសិនបើមានតួអក្សរក្នុងធាតុនេះមានគូដូចគ្នានេះ, កូដជាធម្មតាគឺជាការកាត់បន្ថយតិចតួច: # ccff00 អាចត្រូវបានសរសេរជា # cf0:

រាងកាយផ្ទៃខាងក្រោយ-color {: # cf0 ;} ។

ឈ្មោះនេះគឺ, សូម្បីតែនៅក្នុងណ៍កម្របំផុត។ ឧទាហរណ៍នៅក្នុងការបន្ថែមទៅនឹងស្ដង់ដារក្រហមនិងសអ្នកអាចប្រើ NavajoWhite (#FFDEAD) ឬ Honeydew2 (# E0EEE0):

រាងកាយ {ផ្ទៃខាងក្រោយ-color: ស្វាយ; } ។

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

តម្លៃចុងក្រោយនៅក្នុងផ្ទៃខាងក្រោយ RGBA កំណត់ភាពស្រអាប់និងពី 0 (តម្លាភាព) ទៅ 1 (ស្រអាប់) ។

វាមានតម្លៃមិនប្រក្រតីមួយចំនួន។ ផ្ទៃខាងក្រោយអាចកំណត់ដោយប្រើ HSL និង HSLA ។ អ្នកទាំងពីរត្រូវបានបន្ថែមទៅ CSS3 ហើយដូច្នេះមិនត្រូវបានគាំទ្រដោយ IE កំណែ 9 ឬខ្ពស់ជាងនេះ។ តំណាង RGB ដូចគ្នាឬ RGBA, តែនៅក្នុងទ្រង់ទ្រាយផ្សេងគ្នា: លាំ (ម្លប់ - តម្លៃនៅលើកង់ណ៍នេះត្រូវបានផ្តល់ជូនជាដឺក្រេ), តិត្ថិភាព (តិត្ថិភាព - អាំងតង់ស៊ីតេណ៍ជាភាគរយពី 0 ដល់ 100), ពន្លឺ (ពន្លឺ - ពន្លឺ, វាស់ដូចគ្នានេះដែរ parameter តិត្ថិភាព ) ។

រូបភាពផ្ទៃខាងក្រោយគុណលក្ខណៈ

កំណែកម្មវិធីរុករកឆ្លងភាគច្រើនបំផុតនៃផ្ទៃខាងក្រោយថ្លា - នេះជាការប្រើប្រាស់នៃរូបភាព។ ក្នុង CSS3, អ្នកអាចកំណត់រូបភាពកាន់តែច្រើន, នេះត្រូវបានធ្វើតាមរយៈសញ្ញាក្បៀស។ ឧទាហរណ៍:

{រូបភាពផ្ទៃខាងរាងកាយ: url (bg1.png), url (bg2.png)} ។

វិធីនេះនៃការគាំទ្រដល់សូម្បីតែ IE8 ។ រូបភាពជាច្រើននៅក្នុងផ្ទៃខាងក្រោយនៃកៅស៊ូដែលបានប្រើក្នុងប្លង់នេះ។ សំខាន់កុំភ្លេចប្រើរូបភាពណាមួយនិងកំណត់ផ្ទៃខាងក្រោយនៅក្នុង CSS, ជាអ្នកប្រើប្រាស់ធម្មតាអាចផ្ទុកឡើងរូបភាពមួយ។

ផ្ទៃខាងក្រោយទីតាំងគុណលក្ខណៈ

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

រាងកាយ {ផ្ទៃខាងក្រោយទីតាំង: កណ្តាលខាងស្តាំ ;} - ក្នុងឧទាហរណ៍នេះ, លំនាំនឹងត្រូវបានមានទីតាំងស្ថិតនៅផ្នែកខាងស្ដាំនៃទំព័រ, កំពូលនិងបាតនៃចម្ងាយរូបភាពទៅដូចគ្នា។

ទំហំផ្ទៃខាងក្រោយគុណលក្ខណៈ

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

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

ផ្ទៃឯកសារភ្ជាប់គុណលក្ខណៈ

គុណលក្ខណៈនេះបញ្ជាក់ឥរិយាបថរបស់រូបភាពផ្ទៃខាងក្រោយខណៈពេលដែលរមូរ។ ដូច្នេះវាអាចទទួលយកបាន 3 តម្លៃ (មិនរួមបញ្ចូលមរតកសរុបសម្រាប់ការទាំងអស់នៃគុណលក្ខណៈដែលបានពិភាក្សានៅក្នុងអត្ថបទនេះ):

• ថេរ - ធ្វើឱ្យរូបភាពនៅលើផ្ទៃខាងក្រោយនៃការជួសជុលនេះ;
• រមូរ - រមូរផ្ទៃខាងក្រោយជាមួយធាតុនេះ;
• ក្នុងតំបន់ - រូបភាពលើផ្ទៃខាងក្រោយនេះត្រូវបានរមូរប្រសិនបើរមូរមានមាតិកា។ ផ្ទៃខាងក្រោយដែលទៅហួសពីមាតិការបស់ស៊ុមដែលត្រូវបានជួសជុល។

ឧទាហរណ៍នៃការប្រើប្រាស់:

រាងកាយផ្ទៃឯកសារភ្ជាប់ {ថេរ} ។

បច្ចុប្បន្ន, Firefox ដែលមិនគាំទ្រការអចលនទ្រព្យឆ្នាំមុន (ក្នុងស្រុក) ។

ដើមកំណើតគុណលក្ខណៈផ្ទៃខាងក្រោយ

គុណលក្ខណៈនេះទទួលខុសត្រូវសម្រាប់ធាតុទីតាំង។ កម្មវិធីរុករកដើមទាមទារឱ្យប្រើបុព្វបទនេះ។ ទ្រព្យដែលខ្លួនវាមានប៉ារ៉ាម៉ែត្របី:

• ប្រអប់ត្រូវបានចន្លោះទាក់ទងទៅនឹងលំនាំដាក់នៅគែម, ខណៈពេលដែលយកទៅក្នុងគណនីកម្រាស់នៃស៊ុម;
• ប្រអប់លក្ខណៈសម្បត្តិព្រំដែនមុនខុសពីបន្ទាត់ព្រំដែនក្នុងដែលអាចត្រូវបានទាំងស្រុងឬផ្នែកខ្លះត្រួតលើគ្នាលំនាំនេះ;
• រូបភាពទីតាំងប្រអប់ pryavyazyvaya មាតិកាមាតិការបស់វា។

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

ផ្ទៃម្តងទៀតគុណលក្ខណៈ

តាមក្បួនមួយ, ប្រសិនបើរូបភាពផ្ទៃខាងក្រោយនេះត្រូវបានបញ្ជាក់, វាត្រូវតែត្រូវបានធ្វើម្តងទៀតផ្ដេកឬបញ្ឈរ។ សម្រាប់ការនេះនិងត្រូវបានគេប្រើផ្ទៃគុណលក្ខណៈម្តងទៀត។ ដូច្នេះផ្ទៃខាងក្រោយប្លុក, CSS ដែលមានទ្រព្យនោះអាចមានមួយនៃប៉ារ៉ាម៉ែត្រច្រើន:

• គ្មានម្តងទៀត - រូបភាពលេចឡើងនៅលើទំព័រដែលបាននៅក្នុងកំណែតែមួយ;
• ធ្វើម្តងទៀត - ផ្ទៃខាងក្រោយត្រូវបានធ្វើម្តងទៀតក្នុង x បាននិង y;
• ធ្វើម្តងទៀត-x - តែផ្ដេក;
• ធ្វើម្តងទៀត-y - តែបញ្ឈរ;
• ចន្លោះ - ផ្ទៃខាងក្រោយត្រូវបានធ្វើម្តងទៀតប៉ុន្តែប្រសិនបើមានចន្លោះគឺមិនអាចទៅរួចទេដើម្បីបំពេញនៅក្នុងរវាងរូបភាពលេចឡើងទទេ!
• ជុំ - រូបភាពត្រូវបានធ្វើមាត្រដ្ឋាន, ប្រសិនបើវាមិនបំពេញតំបន់នោះទាំងមូលនៃរូបភាពទាំងមូល។

ឧទាហរណ៍នៃគុណលក្ខណៈនេះ:

រាងកាយផ្ទៃម្តងទៀត {: no- ម្តងទៀតម្តងទៀត} - ស្រដៀងគ្នាផ្ទៃខាងក្រោយ-ម្តងទៀត: ធ្វើម្តងទៀត-y ។

ក្នុង CSS3 អាចបញ្ជាក់តម្លៃសម្រាប់រូបភាពច្រើននៅពេលរាយប៉ារ៉ាម៉ែត្រដែលបំបែកដោយសញ្ញាក្បៀស។

ឈុតផ្ទៃខាងក្រោយ-គុណលក្ខណៈ

គុណលក្ខណៈនេះកំណត់ឥរិយាបថនៃផ្ទៃខាងក្រោយក្រោមការព្រំដែននេះ (ឧ, នៅក្នុងករណីនៃស៊ុមចំនុចនេះ):

• ចន្លោះប្រអប់ - ផ្ទៃខាងក្រោយបានបង្ហាញនៅក្នុងផ្ទៃខាងក្នុងនៃប្លុកនេះ;
• ព្រំដែនប្រអប់ - រូបភាពភ្ជាប់មកនៅក្រោមក្របខ័ណ្ឌនេះ;
• មាតិកាប្រអប់ - រូបភាពផ្ទៃខាងក្រោយនឹងនៅលើលេចឡើងតែនៅក្នុងមាតិកា។

ឧទាហរណ៍នៃការប្រើប្រាស់:

រាងកាយផ្ទៃឈុត {: content- ប្រអប់;} ។

ជ្រុំនិង Safari តម្រូវឱ្យបុព្វបទ -webkit- ។

គុណសម្បត្ដិនិងតម្រងស្រអាប់

គុណលក្ខណៈភាពស្រអាប់អនុញ្ញាតឱ្យអ្នកកំណត់ភាពថ្លារបស់ផ្ទៃខាងក្រោយនេះ - ទ្រព្យសម្បត្តិ CSS បានធ្វើការនៅក្នុងកម្មវិធីរុករកនឹងធ្វើទាំងអស់។ តម្លៃនេះត្រូវបានកំណត់នៅក្នុងជួរពី 0.0 ទៅ 1.0 បញ្ចូលគ្នា។ ក្នុងករណីនេះអ្នកអាចកំណត់ភាពថ្លារបស់ផ្ទៃខាងក្រោយនេះជា CSS មិនមានតម្លៃចំនួនគត់ជំនួសឱ្យ 0.3 គឺគ្រប់គ្រាន់ដើម្បីសរសេរ .3:

.block {រូបភាពផ្ទៃខាងក្រោយ: url ( img.png); ភាពស្រអាប់: 3;} ។

ភាពស្រអាប់ផ្ទៃខាងក្រោយដើម្បីកំណត់នោះ, CSS គឺសមរម្យសូម្បីតែសម្រាប់ IE ខាងក្រោមកំណែទីប្រាំបួននេះ, ប្រើគុណលក្ខណៈតម្រង:

.block {រូបភាពផ្ទៃខាងក្រោយ: url ( img.png); តម្រង: អាល់ហ្វា (ភាពស្រអាប់ = 30)} ។

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

តាមដានស្ថិតិការប្រើប្រាស់របស់អ្នកសម្រាប់កម្មវិធីរុករកឯករាជនិងប្រទេសដទៃទៀតទាំងអស់ជានិច្ច។ បញ្ហាធំបំផុតនៃការទាំងអស់ DTP - កំណែចាស់របស់ IE, ពួកគេមិនអនុញ្ញាតឱ្យអ្នកប្រើ CSS3 កម្រិតពេញលេញ។ ក្នុងប្លង់កុំភ្លេចប្រើសេវាពិសេសដែលពិនិត្យមើលថាតើកម្មវិធីរុករករបស់អ្នកគាំទ្រអចលនទ្រព្យជា CSS ណាមួយ។ ប្រសិនបើអ្នកមិនអាចដំឡើងកំណែចាស់របស់កម្មវិធីរុករករកសេវាដែលនឹងពិនិត្យមើលការងារតំបន់បណ្តាញនៅក្នុងកម្មវិធីរុករកជាច្រើនលើបណ្តាញ។