ស្វែងយល់អំពីភាពស្រអាប់ CSS3

ធ្វើឱ្យផ្ទៃខាងក្រោយរបស់អ្នកថ្លា

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

របៀបប្រើភាពស្រអាប់

ទ្រព្យភាពស្រអាប់មានតម្លៃនៃតម្លាភាពពី 0,0 ដល់ 1,0 ។

0,0 គឺ 100% មានតម្លាភាព - អ្វីទាំងអស់ខាងក្រោមធាតុដែលនឹងបង្ហាញទាំងស្រុងតាមរយៈ។ 1.0 គឺ 100% ស្រអាប់ - មិនមានអ្វីនៅពីក្រោមធាតុនេះនឹងបង្ហាញតាមរយៈ។

ដូច្នេះដើម្បីកំណត់ធាតុមួយឱ្យមានភាពថ្លា 50% អ្នកនឹងសរសេរថា:

ភាពស្រអាប់ 0,5;

សូមមើលឧទាហរណ៍ខ្លះនៃភាពស្រអាប់ក្នុងសកម្មភាព

ត្រូវប្រាកដថាសាកល្បងក្នុងកម្មវិធីរុករកចាស់

IE 6 និង 7 មិនគាំទ្រលក្ខណសម្បត្តិភាពស្រអាប់របស់ CSS3 ទេ។ ប៉ុន្តែអ្នកមិនមានសំណាងទេ។ ផ្ទុយទៅវិញ IE គាំទ្រតម្រងអាល់ហ្វាដែលមានលក្ខណៈសម្បត្តិតែមួយគត់របស់ Microsoft ។ តម្រងអាល់ហ្វាក្នុង IE ទទួលយកតម្លៃពី 0 (តម្លាភាពទាំងស្រុង) ដល់ 100 (ស្រអាប់ទាំងស្រុង) ។ ដូច្នេះដើម្បីទទួលបានតម្លាភាពនៅក្នុង IE អ្នកគួរតែគុណភាពស្រអាប់របស់អ្នកឱ្យបាន 100 និងបន្ថែមតម្រងអាល់ហ្វាទៅរចនាប័ទ្មរបស់អ្នក:

តម្រង: អាល់ហ្វា (ស្រអាប់ = 50);

មើលតម្រងអាល់ហ្វានៅក្នុងសកម្មភាព (IE តែប៉ុណ្ណោះ)

និងប្រើបុព្វបទកម្មវិធីរុករក

អ្នកគួរប្រើបុព្វបទ -moz- និង -webkit-prefixes ដូច្នេះកំណែចាស់របស់កម្មវិធី Mozilla និង Webkit គាំទ្រវាផងដែរ:

-webkit-opacity: 0.5;
-moz-opacity: 0.5;
ភាពស្រអាប់ 0,5;

តែងតែដាក់បុព្វបទកម្មវិធីរុករកជាមុននិងលក្ខណៈ CSS3 ត្រឹមត្រូវ។

សាកល្បងបុព្វបទកម្មវិធីរុករកនៅក្នុងកម្មវិធីរុករក Mozilla និង Webkit ចាស់ៗ។

អ្នកអាចធ្វើឱ្យរូបភាពស្អាតផងដែរ

កំណត់ភាពស្រអាប់នៅលើរូបភាពខ្លួនវាហើយវានឹងបន្ថយទៅក្នុងផ្ទៃខាងក្រោយ។ នេះពិតជាមានប្រយោជន៍សម្រាប់ រូបភាពផ្ទៃខាងក្រោយ ។

ហើយប្រសិនបើអ្នកបន្ថែមស្លាកយុថ្កាអ្នកអាចបង្កើត បែបផែនព្រួញ ដោយគ្រាន់តែផ្លាស់ប្តូរភាពស្រអាប់នៃរូបភាព។

a: hover img {
តម្រង: អាល់ហ្វា (ស្រអាប់ = 50)
តម្រង: អញ្ចឹង: DXImageTransform.Microsoft.Alpha (ភាពស្រអាប់ = 50)
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
ភាពស្រអាប់ 0,5;
}

ប៉ះពាល់ដល់ HTML នេះ:

សាកល្បងរចនាប័ទ្មខាងលើនិង HTML នៅក្នុងសកម្មភាព។

ដាក់អត្ថបទលើរូបភាពរបស់អ្នក

ជាមួយភាពស្រអាប់អ្នកអាចដាក់អក្សរនៅលើរូបភាពហើយមានរូបភាពលេចឡើងនៅកន្លែងដែលអត្ថបទនោះ។

បច្ចេកទេសនេះគឺពិបាកបន្តិចបន្តួចពីព្រោះអ្នកមិនអាចបន្ថយរូបភាពបានទេព្រោះវានឹងបន្ថយរូបភាពទាំងមូល។ ហើយអ្នកមិនអាចបន្ថយ ប្រអប់អត្ថបទ នោះទេព្រោះអត្ថបទនឹងបន្ថយនៅទីនោះផងដែរ។

1. ដំបូងអ្នកបង្កើតធុង DIV ហើយដាក់រូបភាពរបស់អ្នកនៅខាងក្នុង:

   
   

2. អនុវត្តតាមរូបភាពជាមួយ DIV ទទេ - នេះគឺជាអ្វីដែលអ្នកនឹងធ្វើឱ្យមានតម្លាភាព។

   
   
   

3. រឿងចុងក្រោយដែលអ្នកបន្ថែមនៅក្នុង HTML របស់អ្នកគឺ DIV ជាមួយអត្ថបទរបស់អ្នកនៅក្នុងវា:

   
   
   
   នេះគឺជាឆ្កែ Shasta របស់ខ្ញុំ។ តើគាត់មិនគួរឱ្យស្រឡាញ់មែនទេ?

4. អ្នករចនាប័ទ្មវាជាមួយទីតាំង CSS, ដើម្បីដាក់អត្ថបទខាងលើរូបភាព។ ខ្ញុំបានដាក់អត្ថបទរបស់ខ្ញុំនៅលើផ្នែកខាងឆ្វេងប៉ុន្តែអ្នកអាចដាក់វានៅខាងស្តាំដោយផ្លាស់ប្តូរទាំងពីរខាងឆ្វេង: 0; លក្ខណសម្បត្តិទៅស្តាំ: 0; ។

   # រូបភាព {
   ទីតាំង: ទំនាក់ទំនង
   ទទឹង: 170px;
   កម្ពស់: 128px;
   រឹម: 0;
   }
   #text {
   ទីតាំង: ដាច់ខាត
   កំពូល: 0;
   ខាងឆ្វេង: 0;
   ទទឹង: 60 ភីក;
   កម្ពស់: 118px;
   ផ្ទៃខាងក្រោយ: #fff;
   ចន្លោះ: 5px;
   }
   #text {
   តម្រង: អាល់ហ្វា (ភាពស្រអាប់ = 70);
   តម្រង: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-opacity: 0.70;
   ភាពស្រអាប់ 0,7;
   }
   # ពាក្យ {
   ទីតាំង: ដាច់ខាត
   កំពូល: 0;
   ខាងឆ្វេង: 0;
   ទទឹង: 60 ភីក;
   កម្ពស់: 118px;
   ផ្ទៃខាងក្រោយ: ថ្លា;
   ចន្លោះ: 5px;
   }

មើលរបៀបដែលវាមើលទៅ