වෙබ් අඩවියට ප්රතිගාමී පසුබිම් රූප එක් කරන්න

CSS භාවිතා කරමින් ප්රතිචාරාත්මක නිර්මාණ අනුරූ එකතු කිරීමට මෙය මෙන්න

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

ඔබේ වෙබ් අඩවියේ සැලැස්ම විවිධ තිර ප්රමාණවලින් වෙනස් වන අතර එම පසුබිම් ඡායාරූප අනුව ඒවායේ ප්රමාණ පරිමාණය කළ යුතුය.

ඇත්ත වශයෙන්ම, මෙම "තරල රූප" ප්රතිචාරාත්මක වෙබ් අඩවිවල ප්රධාන කෑලි අතරින් එකක් (තරල ජාලයක් සහ මාධ්ය විමසුම් සමග). මුලින් පටන් ප්රතිචාර දක්වන වෙබ් නිර්මාණ නිර්මාණයෙන් මෙම කෑලි තුනක් ප්රධාන තැනක් වී තිබේ. එහෙත් එය වෙබ් අඩවියට ප්රතිචාරාත්මක අඳින අනුරූප එකතු කිරීමට පහසුය. (ආකෘති රූපය HTML සලකුණු කොටසක් ලෙස සංකේතනය කර ඇති ග්රැෆික්ස්) පසුබිම් සිතුවම් සහිතව (CSS පසුබිම් ගුණාංග භාවිතා කරමින් පිටුවට සාදන ලද) බොහෝ වෙබ් නිර්මාණකරුවන්ට සහ ඉදිරිපස අවසානයෙහි සංවර්ධකයින්ට විශාල අභියෝගයක් වී ඇත. ස්තුතිවන්තව, CSS හි "පසුබිම් ප්රමාණයේ" දේපල එකතු කිරීම මගින් මෙය කළ හැකි ය.

වෙනම ලිපියක් තුල, මම CSS3 දේපළ පසුබිමක් භාවිතා කරන්නේ කෙසේද යන්න කවුළුවක් තුලට ගැලපෙන පරිදි පින්තූර දිගු කිරීමට භාවිතා කළද, නමුත් මෙම දේපල සඳහා යෙදවීමට වඩාත් හොඳ, වඩාත් ප්රයෝජනවත් ක්රමයක් තිබේ. මෙය සිදු කිරීම සඳහා, අපි පහත දේපල හා අගය සංයෝජනය භාවිතා කරනු ඇත:

පසුබිම විශාලත්වය: ආවරණ;

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

මෙම කවුළුව හැකි තරම් විශාල කවුළුවෙහි තබා ඇත. මුළු කවුළුව මතුපිට ආවරණය කර ඇත. මෙයින් අදහස් කරන්නේ ඔබ ඔබේ පිටුවෙහි හිස් තැන් නොතිබීම හෝ ප්රතිරූපය මත යම් විකෘති වීමක් ඇති බවය, නමුත් එයින් අදහස් වන්නේ තිරයේ දර්ශන අනුපාතය සහ රූපය මත පදනම්ව රූපය සමහරක් සමනය කළ හැකි බවයි. නිදසුනක් ලෙස රූපයක් (ඉහළ, පහළ, වම් හෝ දකුණු පස) රූපයේ රූපය මත කපා දැමිය හැකිය, පසුබිමේ පිහිටුම් දේ සඳහා ඔබ භාවිතා කරන අගයන් මත පදනම්ව. "ඉහළ වම්පස" පසුබිම වෙත යොමුවුවහොත්, අනුරූපයේ ඕනෑම අතිරික්තයක් පහළ සහ දකුණු පැති වලින් බැස ඇත. පසුබිම් රූපය ඔබ කේන්ද්රගත වුවහොත්, අතිරික්තය සියලු පැතිවලින් බැස යන නමුත්, එම අතිරික්තය ව්යාප්ත වන බැවින්, එක් පැත්තක බලපෑමට වඩා අඩුවෙන් සේවය කරනු ලැබේ.

පසුබිම් පරිමාණය භාවිතා කරන්නේ කෙසේද: ආවරණ;

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

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

විශාලකරණ පසුබිම් ඡායාරූප භාවිතා කිරීමට පොදු ක්රමයක් වන්නේ ඔබ එම රූපයේ සම්පූර්ණ පසුබිම් පසුබිමක් භාවිතා කිරීමට අවශ්ය නම් එම පිටුව පුළුල් වන අතර එය ඩෙස්ක්ටොප් පරිගණකයක හෝ බොහෝ විට කුඩා සහ අතින් ගෙනයන, ජංගම උපකරණ.

ඔබේ වෙබ් අඩවියේ ඔබගේ සත්කාරකයට උඩුගත කර පසුබිම් රූපයක් ලෙස ඔබේ CSS වෙත එය එකතු කරන්න:

පසුබිම් රූප: url (fireworks-over-wdw.jpg);
පසුබිම්-පුනරාවර්තනය: නො-නැවත කියවීම;
පසුබිම් ස්ථානය: මධ්යස්ථ මධ්යස්ථානය;
පසුබිම් ඇමුණුම්: ස්ථාවර;

මුලින්ම CSS බ්රවුසරයේ පෙරදසුන එකතු කරන්න:

-webkit-background-size: ආවරණ;
-moz-background-size: ආවරණ;
-o-background-size: ආවරණ;

එවිට CSS දේපල එකතු කරන්න:

පසුබිම විශාලත්වය: ආවරණ;

විවිධ වර්ණවලට ගැලපෙන වෙනස් රූප භාවිත කරමින්

ඩෙස්ක්ටොප් හෝ ලැප්ටොප් අත්දැකීමක් සඳහා ප්රතිචාරාත්මක මෝස්තරයක් වැදගත් වුවද, අන්තර්ජාලයට පිවිසිය හැකි විවිධාකාර උපාංග සැලකිය යුතු ලෙස වර්ධනය වී ඇති අතර විශාල ප්රමාණයේ තිර ප්රමාණවලින් එය ලැබෙයි.

කලින් සඳහන් කළ පරිදි, ස්මාර්ට් ජංගම දුරකතනයක් මත ඉතා විශාල ප්රතිචාරාත්මක පසුබිම් රූපයක් පැටවීම, උදාහරණයක් ලෙස කාර්යක්ෂම හෝ කලාප පළල-දැනුවත් සැලසුමක් නොවේ.

ඔබ විසින් ප්රදර්ශනය කරනු ලබන උපකරණවලට අනුරූප වන අනුරූප සේවයේ යෙදීම සඳහා මාධ්ය විමසුම් භාවිතා කළ හැකි ආකාරය ඉගෙන ගන්න. තවද ජංගම උපාංග සමඟ ඔබේ වෙබ් අඩවියෙහි ගැළපුම තවදුරටත් වැඩි දියුණු කර ගත හැකි ආකාරය දැන ගන්න.

ජෙන්ෆීර් ක්රිනින්ගේ මුල් ලිපියක්. ජෙරමි ගිරාඩ් විසින් සංස්කරණය කරන ලද්දේ 9/12/17