වෙබ් පිටුවකට ගැලපෙන පසුබිම් රූපයක් දිගුකරන්නේ කෙසේද

පසුබිම් ග්රැෆික්ස් සමඟ ඔබේ වෙබ් අඩවියේ දෘශ්ය අවශ්යතාව ලබා දෙන්න

පින්තූර ආකර්ෂණීය වෙබ් අඩවි නිර්මාණයන්හි වැදගත් කොටසකි. පසුබිම් රූප භාවිතා කිරීම මෙයට ඇතුළත් වේ. පිටු වල පැති පිටුපසින් භාවිතා කරන ලද රූප සහ ග්රැෆික්ස් අන්තර්ගතයන් පිටු ලෙස ඉදිරිපත් කරන ලද රූපවලට වඩා ඒවා භාවිතා කරනු ලැබේ. මෙම පසුබිම් රූපයන් පිටුවකට දර්ශනීය උනන්දුවක් දැක්විය හැකි අතර ඔබ පිටුවක සොයනු ලබන දෘෂ්ය නිර්මාණයක් ලබා ගැනීමට උපකාරී වේ.

ඔබ පසුබිම් ඡායාරූප සමඟ වැඩ කරන්නේ නම්, ඔබට ගැලපෙන පිටුවට ගැලපෙන පරිදි පින්තූරයක් අවශ්ය වන අවස්ථාවන්හිදී ඔබට සිදුවනු ඇත.

මෙය පුළුල් පරාසයක උපාංග සහ තිර ප්රමාණයන් වෙත ලබා දෙන ප්රතිචාරාත්මක වෙබ් අඩවි සඳහා විශේෂයෙන්ම සත්ය වේ.

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

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

සිරුර {
පසුබිම: url (bgimage.jpg) no-repeat;
පසුබිම් ප්රමාණය: 100%;
}}

Caniuse.com අනුව, මෙම දේපල IE 9+, ෆයර්ෆොක්ස් 4+, ඔපෙරා 10.5+, Safari 5+, Chrome 10.5+ සහ සියලු ප්රධාන ජංගම බ්රවුසර වල ක්රියා කරයි. මෙය වර්තමානයේ පවතින වර්තමාන බ්රව්සර සඳහා ඔබට ආවරණය කරයි, එයින් අදහස් වන්නේ ඔබ විසින් යමෙකුගේ තිරය මත වැඩ නොකරන බවය.

පැරණි වෙබ් බ්රව්සර වල දිගුකාලීන පසුබිමක් ඉක්මවා යාම

IE9 වඩා පැරණි ඕනෑම බ්රව්සරයකට සහය දැක්වීමට ඔබට නොහැකි වනු ඇත, නමුත් IE8 මෙම දේපලට සහය නොදක්වන බව ඔබ සිතා බලමු. ඒ අවස්ථාවේ දී, ඔබ දිගු කළ පසුබිමක් ව්යාජය. තවද ඔබට ෆයර්ෆොක්ස් 3.6 (-moz-background-size) සහ ඔපෙරා 10.0 (-o-background-size) සඳහා බ්රවුසර උපාගයන් භාවිතා කළ හැකිය.

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

id = "bg" />

1. පළමුව, සියලුම බ්රව්සරයන්හි 100% උස, 0 ආන්තික සහ 0 වැදුම් සහ HTML BODY මූලද්රව්යවල තිබෙන බව තහවුරු කරගන්න. ඔබේ HTML ලේඛනයේ හිස පහත සඳහන් පරිදි තබන්න:

2. වෙබ් පිටුවේ පළමුවන අංගය ලෙස පසුබිම වීමට ඔබට අවශ්ය පින්තූරය එකතු කරන්න, සහ "bg" හි id එකට දෙන්න:

3. පසුබිම් රූපය ස්ථානගත කිරීම සඳහා එය ඉහළ සහ වමතින් ස්ථාවර කර ඇති අතර එය 100% පළල සහ 100% උස වේ. ඔබගේ ශෛලිය පත්රයට මෙය එකතු කරන්න:

   img # bg {
   ස්ථානය: ස්ථාවර;
   ඉහළ: 0;
   වමේ: 0;
   පළල: 100%;
   උස: 100%;
   }}

4. ඔබගේ අන්තර්ගතය DIV මූලද්රව්යයේ අන්තර්ගතය "අන්තර්ගතය" සහිත ID සමඟ එක් කරන්න. අනුරූපයට පහළින් DIV එකතු කරන්න:

   මෙහි අඩංගු සියළුම අන්තර්ගතයන් - ශීර්ෂකයන්, ඡේද ඇතුළු

   සටහන: දැන් ඔබගේ පිටුව දෙස බැලීම සිත්ගන්නා සුළුය. රූපය ප්රදර්ශනය කළ යුතු අතර, ඔබේ අන්තර්ගතය මුලුමනින්ම අස්ථානගත වී ඇත. මන්ද? පසුබිම් රූපයේ උස අඩි 100% වන අතර, ලේඛනයේ ප්රවාහය තුළ අන්තර්ගතය බෙදීමෙන් පසු රූපය - බොහෝ බ්රව්සරයන් එය දර්ශණය නොවේ.
   
5. ඔබේ අන්තර්ගතය සාපේක්ෂව පවතින අතර එහි z-index එකක් ඇත. මෙය ප්රමිති-අනුකූල වෙබ් බ්රව්සර තුළ පසුබිම් රූපයට වඩා ඉහළින් ගෙන එයි. ඔබගේ ශෛලිය පත්රයට මෙය එකතු කරන්න:

   #content {
   තත්ත්වය: සාපේක්ෂ
   z-index: 1;
   }}

1. ඒත් ඔයා ඉවර නෑ. ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 6 ප්රමිතිවලට අනුකූල නොවන අතර තවමත් ගැටළු කිහිපයක් තිබේ. සෑම බ්රව්සර් සිටම CSS සඟවන්නට බොහෝ ක්රම සැඟවිය හැකි නමුත් IE6, නමුත් පහසුම (සහ අවම වශයෙන් වෙනත් ගැටළු ඇති වීමට ඉඩ ඇති) කොන්දේසි සහිත අදහස් භාවිතා කිරීමයි. ඔබගේ ලේඛනයේ හිස තුළ ඔබේ වින්යාසය අනුව පහත සඳහන් කරන්න:

2. උච්චාරණය කරන ලද විවේචනය ඇතුළත, තවත් 6 ආකාරයේ මෝස්තර සහිත තවත් විලාසිතා ලේබලයක් එක් කරන්න 6:

3. IE 7 සහ IE 8 හි පරීක්ෂා කිරීමට වග බලා ගන්න. ඒවාට සහය දැක්වීම සඳහා ඔබට අදහස් දැක්වීමටද ඔබට අවශ්ය විය හැකිය. කෙසේ වෙතත්, මම එය පරීක්ෂණය කරන විට එය වැඩ කළේය.

හරි - මෙය WAY සමාවන්න. ඉතා අඩුවෙන් IE 7 හෝ 8 සඳහා සහාය අවශ්යයි, ඊටත් වඩා අඩු IE6!

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

කුඩා ආකාශය හරහා දිග්ගැසුනු පසුබිම් රූපයක් සැකසීම

ඔබට DIV හෝ වෙනත් වෙබ් පිටුවක DIV හරහා හෝ දිගු කල පසුබිම් රූපයක් ව්යාජ ලෙස භාවිතා කිරීමට ඔබට සමාන තාක්ෂණයක් භාවිතා කළ හැකිය. ඔබ නිරපේක්ෂ ස්ථානගත කිරීම භාවිතා කිරීමට හෝ ඔබගේ පිටුවෙහි අනෙකුත් කොටස් සඳහා අමුතු විචල්ය ගැටළු තිබිය යුතුය.

1. පසුබිම ලෙස භාවිතා කිරීමට අවශ්ය වන පිටුවෙහි රූපය තබන්න.

2. ශෛලිය පත්රයේ දී රූපය සඳහා පළල සහ උස සැකසිය යුතුය. සටහන, පළල හෝ උස සඳහා ප්රතිශත භාවිතා කළ හැකිය, නමුත් උස සඳහා දිගු අගයන් සමඟ ගැලපීම පහසු කරමි.

   img # bg {
   පළල: 20em;
   උස: 30em;
   }}

3. අප ඉහත සඳහන් කළ පරිදි "අන්තර්ගතය" සමඟ ඔබේ අන්තර්ගතය ස්ථානගත කරන්න:

   ඔබගේ සියලු අන්තර්ගතයන් මෙන්න

4. අන්තර්ගතයේ ග්රන්ථය පසුබිම් රූපයේ සමාන පළල හා පළල එකම ආකාරයේ විය යුතුය:

   div # content {
   පළල: 20em;
   උස: 30em;
   }}

5. ඉන්පසු රූපයේ රූපයට සමාන උසකින් යුක්තය. ඒ නිසා ඔබේ රූපය 30 ට ඔබට ඉහළම ආකාරයේ විලාසයක් ඇති වනු ඇත: -30em; අන්තර්ගතයේ අඩංගු z-දර්ශකය 1 ට එකක් තැබීමට අමතක නොකරන්න.

   #content {
   තත්ත්වය: සාපේක්ෂ
   ඉහළ: -30em;
   z-index: 1;
   පළල: 20em;
   උස: 30em;
   }}

6. ඊළඟට ඔබ කළ පරිදි IE 6 පරිශීලකයින් සඳහා z-index -1 හි එක් කරන්න:

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

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