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 පමණක්)

සහ භාවිතා කරන්න බ්රවුසර් Prefixes

ඔබ විසින් -moz- සහ -webkit-උපසර්ගයන් භාවිතා කළ යුතුය. මන්ද ඒවා Mozilla සහ Webkit බ්රව්සරවල පැරණි අනුවාදයන් ද එය අනුමත කරති.

-බෙබිට්-පාරාදීසය: 0.5;
-මොස්-පාරාන්ධතාවය: 0.5;
පාරාන්ධතාවය: 0.5;

සෑම විටම බ්රවුසරයේ උපසර්ගයන් පළමුව, සහ වලංගු CSS3 ගුණාංගය අවසන් වේ.

පැරණි මොසිල්ලා සහ වෙබ්කයිට් බ්රව්සර් වල බ්රව්සර උපාගය පරීක්ෂා කරන්න.

පින්තූර විනිවිද පෙනෙන පින්තූරයක් කරන්න

රූපයේම පාරාන්ධතාවේ ඇති පාරාන්ධතාවය සකසාගෙන එය පසුබිමට දමනවා. මෙය පසුබිම් රූප සඳහා ඇත්තෙන්ම ප්රයෝජනවත් වේ.

ඔබ නැංගුරම ටැගය තුළ එකතු කළහොත් ඔබට ප්රතිරූපීතාවයේ පාරාන්ධතාවය වෙනස් කිරීමෙන් පමණක් හඹා යෑමට හැකිය.

a: hover img {
පෙරණය: ඇල්ෆා (පාරාන්ධතාව = 50)
පෙරණය: DXImageTransform.Microsoft.Alpha (පාරාන්ධතාව = 50)
-මොස්-පාරාන්ධතාවය: 0.5;
-බෙබිට්-පාරාදීසය: 0.5;
පාරාන්ධතාවය: 0.5;
}}

මෙම HTML වලට බලපායි:

ඉහත ආකාරයේ මෝස්තර සහ HTML වල ක්රියාකාරීත්වය පරීක්ෂා කරන්න.

ඔබගේ පින්තූරයේ පෙළ යවමු

පාරාන්ධතාවයකින් තොරව, ඔබට පින්තූරයක් මත පෙළක් තැබිය හැකි අතර, එම පාඨය කොතැනින් ඉවතට යන ලෙස පින්තූරය දිස්වෙනු ඇත.

මෙම ශිල්පීය ක්රමය ඉතා දුර්වල වන අතර, එය හුදෙක් ප්රතිරූපය ක්ෂය වීමෙන් වළක්වා ගත නොහැකිය, සමස්ත රූපය මුළුමනින්ම අඳුරේ. තවද ඔබට පෙළ ව්ස්තරයද එහි දිරාපත් කරනු ඇත.

1. මුලින්ම ඔබ DIV කූඩුවක් නිර්මාණය කර ඔබේ ප්රතිරූපය ඇතුල් කරන්න:

   
   

2. හිස් DIV සමඟ රූපය අනුගමනය කරන්න - මෙය ඔබ විනිවිද පෙනෙන දේ කරයි.

   
   
   

3. ඔබගේ HTML හි ඔබ එකතු කරන අන්තිම දෙය නම් එය ඔබේ පාඨය සමඟ DIV වේ:

   
   
   
   මේ මගේ බල්ලා ෂස්ටා. ඔහු ලස්සනයි නේද?

4. CSS පිහිටීම සමඟ ඔබ එය විලාසිතාවට අනුව, පින්තූරය ඉහළින් පෙළ ටයිප් කිරීමට. මම වම් පැත්තෙහි මගේ පාඨය තැබුවෙමි, නමුත් වම් දෙක වෙනස් කිරීමෙන් ඔබට එය දකුණු පස තැබිය හැකිය: 0; දේපල දකුණට: 0; .

   #රූප {
   තත්ත්වය: සාපේක්ෂ
   පළල: 170px;
   උස: 128px;
   ආන්තික: 0;
   }}
   #පෙළ {
   පිහිටීම: නිරපේක්ෂ
   ඉහළ: 0;
   වමේ: 0;
   පළල: 60px;
   උස: 118px;
   පසුබිම: #fff;
   වැල්ඩින්: 5px;
   }}
   #පෙළ {
   පෙරණය: ඇල්ෆා (පාරාන්ධතාව = 70);
   පෙරහන: DXImageTransform.Microsoft.Alpha (පාරාන්ධතාව = 70);
   -මොස්-පාරාන්ධතාවය: 0.70;
   පාරාන්ධතාවය: 0.7;
   }}
   #වචන {
   පිහිටීම: නිරපේක්ෂ
   ඉහළ: 0;
   වමේ: 0;
   පළල: 60px;
   උස: 118px;
   පසුබිම: විනිවිද පෙනෙන
   වැල්ඩින්: 5px;
   }}

එය බැලූ බැල්මට බලන්න