CSS පසුබිම විනිවිද. CSS මුහුණත් විනිවිද පෙනෙන පසුබිම් හෝ පෙළ

වෙබ් නිර්මාණකරුවන් බොහෝ ක්රම වැඩ CSS3 දියුණුවත් වඩාත් පහසු හා තාර්කික බවට පත් වී තිබේ සමග: පසු, ඔබ දැන් ඇත්තටම නම්යශීලි ඕනෑම වස්තුවක්, අඩු නිතර JavaScript කිරීමට යොමු ගත හැක. ගේ ඔබ පසුබිම විනිවිදභාවය වෙනස් කිරීම සඳහා අවශ්ය බවත් කියන්න මට ඉඩ දෙන්න - CSS වහාම විවිධ විකල්ප ඉදිරිපත් කරයි.

ගුණාංග මාලාවක් මගින් අර්ථ දක්වා ඇති පසුබිම (පසුබිම-රූපය, පසුබිම්-තත්ත්වය , පසුබිම ප්රමාණයේ, පසුබිම්-නැවත, පසුබිම්-ඇමුණුමක්, පසුබිම්-සම්භවය, පසුබිම්-පටයක්, පසුබිම් වර්ණ) වන ගුණාංගය යටතේ, ෙවන් ෙවන් වශෙයන් පවරා හෝ ඒකාබද්ධ කළ හැකි සෑම පසුබිම. අප එක් එක් සවිස්තරාත්මකව සලකා බලමු.

පසුබිම වර්ණ ආරෝපණය

CSS තුළ, පසුබිම වර්ණ විවිධ අයුරින් සකස් කළ හැකි: a hex කේතය, වර්ණ නම හෝ RGB ඇතුළත් භාවිතා කිරීම. CSS3 එය RGBA සමග RGB-පටිගත විකල්පය වෙනුවට භාවිත කළ හැකි ය බවට පත් විය.

පසුබිම වර්ණ:: # FFDAB9 hex වර්ණ කේතය දැලිස් පසු, එම දේපල වාර්තා වී ඇත. මෙම ප්රවේශය චරිත එකම යුගල නම්, මෙම කේතය සාමාන්යයෙන් ටිකක් සැපයුම අත්හිටුවන බව: # ccff00 # cf0 ලෙස ලිවිය හැක:

ශරීරය {පසුබිම වර්ණ: # cf0 ;}.

නම පවා බොහෝ විදේශීය වර්ණ, වේ. උදාහරණයක් ලෙස, සම්මත රතු හා සුදු අමතරව ඔබ NavajoWhite (#FFDEAD) හෝ Honeydew2 (# E0EEE0) භාවිතා කළ හැක:

ශරීරය {පසුබිම වර්ණ: දම්, }.

අග විකල්පය RGB හෝ RGBA ප්රවේශය ඔබ වර්ණ පමණක් නොව, CSS පසුබිම විනිවිදභාවය පමණක් නොව නියම කිරීමට ඉඩ ඇත, නමුත් මෙම ක්රමය පමණක් 9 කට වඩා පැරණි IE සංස්කරණ ක්රියා කරයි. අනෙකුත් වෙබ් බ්රව්සර විනිවිද සමඟ සාමාන්ය අනුවාදය පිළිගන්නවා. මෙම W3C ප්රමිතීන්ට අනුව එය ඒ වෙනුවට තව තවත් සුපුරුදු RGB තවමත් RGBA භාවිතා කිරීමට වඩාත් සුදුසු.

RGBA පසුබිම පසුගිය වටිනාකම සහ 0 (විනිවිද පෙනෙන) සිට 1 (විනිවිද නොපෙනෙන) දක්වා පාරාන්ධතාව සකසයි.

සමහර අසාමාන්ය වටිනාකම් ඇත. පසුබිම වර්ණය HSL හා HSLA භාවිතා සකස් කළ හැකි ය. දෙකම CSS3 එකතු කරන ලද අතර, එම නිසා IE සංස්කරණය 9 හෝ ඊට වඩා වැඩි මඟින් පහසුකම් සපයන්නේ නැත. නොමඟයවන සුලු සමාන RGB හෝ RGBA පමණක් වෙනස් ආකෘතියක්: Hue (සෙවන - වර්ණ රෝද මත අගය, අංශක වලින් ලබා දී ඇත), Saturate (සන්තෘප්තිය - ප්රතිශතයක් ලෙස වර්ණ තීව්රතාව, 0 සිට 100 දක්වා), ආලෝක (ආලෝක - දීප්තිය, මනින සමානව Saturate පරාමිතය ).

පසුබිම-රූපය ආරෝපණය

මෙම විනිවිද පෙනෙන පසුබිම් වඩාත් හරස් බ්රව්සර් වර්ගය - මෙම රූපය භාවිතා වෙයි. CSS3, ඔබ ඊටත් වඩා රූප සැකසිය හැක, මෙම කොමා මගින් සිදු කරනු ලැබේ. උදාහරණයක් ලෙස:

{පසුබිම-පාඩමකි: url එක (bg1.png), url එක (bg2.png)}.

8 යනු පවා සහයෝගය ගැන මේ ආකාරයෙන්. පිරිසැලසුම භාවිතා වන රබර් පසුබිමේ රූප කිහිපයක්. වැදගත් කරුණ නම්, පරිශීලකයන් හුදෙක් රූපය උඩුගත කළ හැකි ලෙස, රූපයක් භාවිත සහ CSS දී පසුබිම් වර්ණය සකස් කිරීමට අමතක කරන්න එපා.

පසුබිම-තත්ත්වය ආරෝපණය

ඔබ පසුබිම ඒකකයක් පිහිටුවීමට මා ප්රතිරූපය භාවිතා කරන්නේ නම්, CSS ඔබට ඕනෑම තැනක තිරය මත රූප ස්ථානගත කිරීමට ඉඩ දෙයි. සුපුරුදු පරිදි, ප්රතිරූපය ඉහළ වම් කෙළවරෙහි පිහිටා ඇත. 'විශේෂණය වාචික උපදෙස් හෝ (ඉහළ, පහළ, ඉතිරි, දකුණු පස) සංඛ්යාත්මක (පොළී, පික්සල හා අනෙකුත් ඒකක) ගනී. මෙම අවස්ථාවේ දී, ඔබ දෙදෙනා සාරධර්ම, තිරස් සහ සිරස් සඳහන් කළ යුතුයි:

ශරීරය {පසුබිම-තත්ත්වය: දකුණු මධ්යස්ථානය ;} - මෙම නිදසුනේ, රටාව පිටුවේ දකුණු පැත්තේ පිහිටා ඇත, ඒ දක්වා ම ප්රතිරූපය දුර ඉහළ හා පහළ.

පසුබිම ප්රමාණයේ ආරෝපණය

සමහර විට එය තැටියක CSS පසුබිම දික් හෝ එහි විශාලත්වය අඩු කිරීමට අවශ්ය වේ. මේ සඳහා, 'විශේෂණය පසුබිම ප්රමාණයේ භාවිතා කරන අතර, පසුබිම ප්රමාණය පික්සල හෝ ප්රතිශත, සහ වෙනත් ඕනෑම ඒකක සකස් කළ හැකි ය.

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

පසුබිම-ඇමුණුමක් ආරෝපණය

අනුචලනය අතර මෙම ලක්ෂණය පසුබිම රූප හැසිරීම දක්වයි. ඒ නිසා, එය 3 අගයන් (මෙම උරුම ඇතුළු නැහැ, මෙම ලිපිය තුළ සාකච්ඡා කළ ගුණාංග සියල්ල සඳහා මුළු) ගත හැක:

• ස්ථාවර - ස්ථාවර පසුබිම මත ඡායාරූපයේ වේ;
• අනුචලනය - මූලද්රව්ය සෙසු රටවල් සමඟ පසුබිම ලියවිලි,
• දේශීය - අනුචලනය අන්තර්ගතයට තිබේ නම් පසුබිම මත ප්රතිරූපය scrolled ඇත. රාමු අන්තර්ගතය එහා ගිය පසුබිම ස්ථාවර කරයි.

භාවිතය උදාහරණය:

ශරීරය {පසුබිම-ඇමුණුමක් ස්ථාවර}.

දැනට, ෆයර්ෆොක්ස් (දේශීය) පසුගිය දේපල සඳහා පහසුකම් සපයන්නේ නැත.

පසුබිම-සම්භවය ආරෝපණය

මෙම ලක්ෂණය ස්ථානගත අංගයක් සඳහා වගකිව යුතු වේ. මුල් කාලීන වෙබ් බ්රව්සර උපසර්ග භාවිතා කල යුතුවේ. දේපල ම පරාමිතීන් තුනක් ඇත:

• සැලකිල්ලට රාමු ඝණකම ගනිමින් සිටියදී පුරවන-කොටුව, අද්දර රටාව සාපේක්ෂව ස්ථානගත ඇත;
• පෙර වෙනස් දේශ-කොටුව ගුණ සීමාව සම්පූර්ණයෙන්ම විය හැකි හෝ අර්ධ වශයෙන් රටාව පැටලෙන්නේ බව;
• අන්තර්ගතය-කොටුව පිහිටුම් රූපය එහි අන්තර්ගතය pryavyazyvaya.

ඔබ සතුව අගයන් නම්, බ්රව්සර, තමන්ගේ ම මාර්ගයක් ප්රතික්රියා කළ හැක: ෆයර්ෆොක්ස් සහ ඔපෙරා පමණක් පළමු විකල්පය සංජානනය.

පසුබිම-නැවත ආරෝපණය

රීතියක් ලෙස, පසුබිම් රූපය දක්වා නොමැති නම්, එය තිරස් අතට හෝ සිරස්ව නැවත නැවතත් භාවිතා කළ යුතු ය. මේ සඳහා ද විශේෂණය පසුබිම-නැවත භාවිත කළා. මේ අනුව, වාරණ පසුබිම, එවැනි දේපල අඩංගු CSS පරාමිතීන් කිහිපයක් එක් කර හැක:

• කිසිදු-නැවත - ප්රතිරූපය තනි අනුවාදය දී පිටුවේ පෙනී;
• නැවත - පසුබිම x හා y නැවත නැවතත් ඇත;
• නැවත-x - එකම තිරස් අතට,
• නැවත-y - එකම සිරස් අතට,
• අවකාශය - පසුබිම නැවත නැවතත්, නමුත් අවකාශය පින්තූර අතර පුරවා නොහැකි නම් හිස් පෙනී;
• වටයේ - එය මුළු පින්තූර සමස්ත ප්රදේශයේ පිරෙන්නේ නැත නම් රූපය, අවදානයට ඇත.

මෙම ගුණාංග උදාහරණය:

ශරීරය {පසුබිම-නැවත: ආයෝජන අවශ්ය වූ යෙදවුම් වලින් ලැබෙන නැවත නැවත} - සමාන පසුබිම-නැවත: නැවත-y.

කොමාවකින් වෙන් පරාමිති, ලැයිස්තුගත වන විට CSS3 දී බහු රූප සඳහා අගයන් ලබා විය හැක.

පසුබිම-පටයක් ආරෝපණය

මෙම ලක්ෂණය සීමාවන් (උ.දා., තිත් රාමු පිළිබඳ පැමිණිල්ලේ දී) යටතේ පසුබිම හැසිරීම නිර්වචනය:

• පුරවන-කොටුව - වාරණ අභ්යන්තරය ප්රදර්ශනය පසුබිම;
• දේශ සීමා-කොටුව - ප්රතිරූපය රාමුව යටතේ එන එක,
• අන්තර්ගතය-කොටුව - එම පසුබිමේ ඡායාරූපයේ පමණක් අන්තර්ගතය තුළ දිස් වනු ඇත.

භාවිතය උදාහරණය:

ශරීරය {පසුබිම-පටයක්: content- කොටුව;}.

Chrom සහ සෆාරි -webkit- උපසර්ගය අවශ්ය වේ.

පාරදෘශ්යතාව ගුණාංග සහ ෆිල්ටර්

පාරාන්ධතාව විශේෂණය ඔබට පසුබිම විනිවිදභාවය සකස් කිරීමට ඉඩ - CSS දේපල සියලු බ්රව්සර් වැඩ කටයුතු කරනු ඇත. වටිනාකම 0.0 සිට ඇතුළත් 1.0 දක්වා පරාසයක තබා ඇත. මෙම අවස්ථාවේ දී, ඔබ CSS පසුබිම විනිවිදභාවය සැකසිය හැක ඒ වෙනුවට 0.3 කිසිදු පූර්ණ සංඛ්යාමය අගය .3 ලිවීමට ප්රමාණවත්:

.block {පසුබිම-රූපය: url එක ( img.png); පාරාන්ධතාව: .3;}.

පසුබිම පාරාන්ධතාව කිරීම සඳහා, CSS දී මෙම පෙරහන විශේෂණය භාවිතා කරන්න, පවා නව වැනි අනුවාදය පහත IE සඳහා සුදුසු වේ:

.block {පසුබිම-රූපය: url එක ( img.png); පෙරහන: ඇල්ෆා (පාරාන්ධතාව = 30)}.

පාරාන්ධතාව භාවිතා පසුබිම, පමණක් නොව, ඒකක තුළ සියලු අංග පමණක් නොව පැහැදිලි වූ විට: මේ අවස්ථාවේ දී, පාරාන්ධතාව අගය පාරාන්ධතාව RGBA උරුමය හරහා විවිධ විනිවිද අංග සැකසුම් බව අතර 0 සහ 100 සටහන සකස් කර ඇත.

සෑම විටම පරිගණකගත ෙතොරතුරු පද්ධති බ්රවුසර හා අනෙකුත් සියලුම රටවල් සඳහා ඔබේ භාවිතය සංඛ්යා ලේඛන අධීක්ෂණය. සියලු DTP විශාලතම ප්රශ්නය - IE පැරණි අනුවාද, ඔවුන් ඔබ සම්පූර්ණ ප්රමාණය CSS3 භාවිතා කිරීමට ඉඩ දෙන්නේ නැහැ. සැකසුම ඔබේ බ්රවුසරය ඕනෑම CSS දේපල සහාය ලබාදෙයි දැයි පරීක්ෂා කරන විශේෂ සේවා භාවිතා කිරීමට අමතක කරන්න එපා. ඔබ බ්රව්සර පැරණි අනුවාද ස්ථාපනය කල නොහැකි නම්, සමඟ අමුත්තන් බහු බ්රව්සර මෙම වෙබ් අඩවිය තුළ කටයුතු පරීක්ෂා කරන බව සේවාවක් සොයා ගන්න.