የድረ ገጽ ገጽታን ለማስያዝ ዳራውን እንዴት እንደሚራመድ

ለርስዎ ድህረ ገፅ ለዳራግራፊክ ግራፊክ ፍላጎት ያሳዩ

ምስሎች ማራኪ የድር ጣቢያ ዲዛይኖች ወሳኝ አካል ናቸው. ይህ የጀርባ ምስሎችን መጠቀም ያካትታል. እነዚህ እንደ የይዘት ገፆች አካል ሆነው ከሚቀርቡ ምስሎች ይልቅ ከገፆች በስተጀርባ ጥቅም ላይ የሚውሉ ምስሎች እና ግራፊክ ናቸው. እነዚህ የዳራ ምስሎች በአንድ ገጽ ላይ የሚታይ ፍላጎት ማከል እና በአንድ ገጽ ላይ ሊፈልጉት የሚችለውን የእይታ ንድፍ እንዲያገኙ ያግዙዎታል.

ከጀርባ ምስሎች ጋር መስራት ከጀመሩ, ምስሉ ከገጹ ጋር ለመገጣጠም እንዲሸጋገር በሚፈልጉበት ሁኔታ ወደ ሁኔታው ​​ይሮጣል.

ይህ በተለይ ለተለያዩ መሳሪያዎችና የማሳያ መጠኖች እየተላለፉ ለተመልካች ድር ጣቢያዎች እውነት ነው.

የጀርባ ንድፍ ለመዘርጋት ያለው ፍላጎት ለድር ንድፍ ሰራተኞች በጣም የተለመደው ምኞት ነው ምክንያቱም እያንዳንዱ ምስል በአንድ የድርጣቢያ ቦታ ውስጥ ስላልሆነ. ቋሚ መጠን ከማቀናበር ይልቅ, ምስሉን ማራዘም ገጹን ለመገጣጠም ብቅ እንዲል ይፈቅድለታል.

የአንድ ገጽ የጀርባ ገጽታ እንዲመስል ምስል ለመለጠፍ በጣም ጥሩው መንገድ የሲኤስ 3 ን ንብረት ለጀርባ መጠናቸው መጠቀም ነው. ለገጽ አካል የዳራ ምስል እና ምስልን ወደ ማያ ገጹ ለማመጣጠን እስከ 100% እንዲሆን የሚወስን አንድ ምሳሌ እዚህ አለ.

body {
ዳራ: url (bgimage.jpg) no-repeat;
የዳራ-መጠን 100%;
}

በ caniuse.com መሠረት ይህ ንብረት በ IE 9+, በ Firefox 4+, በ Opera 10.5+, በ Safari 5+, በ Chrome 10.5+ እና በሁሉም ዋና ተንቀሳቃሽ ማሰሻዎች ላይ ይሰራል. ይሄ ሁሉንም ዛሬ ለሚገኙ ዘመናዊ አሳሾች ይሸፍናል, ይህ ማለት አንድ ሰው በማያ ገጹ ላይ እንደማይሰራ ሳይሰማዎት ነው.

በአሮጌ አሳሾች ውስጥ የተደላደፈ ሁኔታን መፈለግ

ከ IE9 በፊት ያሉ ማንኛውንም አሳሾች መደገፍ አይፈልጉም, ነገር ግን IE8 ይህንን ንብረት የማይደግፍ መሆኑን ስጋት ያድርብ ብለን እንበል. በዚህ ጊዜ, የተራቀቀ ዳራ ማመንጨት ይችላሉ. እንዲሁም ለ Firefox 3.6 (-moz-background-size) እና Opera 10.0 (-o-background-size) የአሳሽ ቅጥያዎችን መጠቀም ይችላሉ.

የተዘረጋ የጀርባ ምስል ለማስመሰል ቀላሉ መንገድ በጠቅላላው ገፅ ላይ ማራዘም ነው. ከዚያ በኋላ ተጨማሪ ቦታ አይጨምሩም ወይም የጽሑፍዎ በተራዘመ አካባቢ ውስጥ እንደሚመጣ መጨነቅ አለብዎት. እንዴት እንደሚሰራ ይኸውና

id = "bg" />

1. በመጀመሪያ, ሁሉም አሳሾች 100% ቁመት, 0 ራዲዶች እና 0 እና በ HTML ኤች ቲ ኤ ኤል አባላቶች ላይ መኖራቸውን ያረጋግጡ. የሚከተለውን በኤል ኤች ቲ ኤም ኤል ራስህ ላይ አስቀምጥ:

2. የድረ-ገጹ የመጀመሪያ ክፍል እንዲሆን የፈለጉትን ምስል እና "bg" መታወቂያ ስጡት.

3. የጀርባ ምስሉን ከላይ እና በግራጅ እንዲስተካከል ያስቀምጡ እና 100% ስፋትና 100% ቁመት. ይህንን ወደ እርስዎ ቅጥ ሉህ ውስጥ ያክሉት-

   img # bg {
   አቀማመጥ: ቋሚ
   ከላይ: 0;
   ወደ ግራ: 0;
   ወርድ: 100%;
   ቁመት: 100%;
   }

4. ሁሉንም ይዘትዎን በ "ይዘት" መታወቂያ ውስጥ ባለው የ DIV ኤለዲ ውስጥ ገጽ ላይ ያክሉ. ከታች ምስሉን ዲዲ አክል:

   ሁሉም ይዘትዎ - ራስጌዎች, አንቀጾች ወዘተ ጨምሮ.

   ማሳሰቢያ: ገጽዎን አሁን ማየት የሚደንቅ ነው. ምስሉ ተዘርግቶ መታየት አለበት, ነገር ግን የእርስዎ ይዘት ሙሉ ለሙሉ ጠፍቷል. ለምን? የጀርባ ምስል 100% በከፍታ ላይ ስለነበረ እና የይዘት ክፍሉ በሰነዱ ፍሰት ውስጥ ካለው ምስል በኋላ ነው - አብዛኛዎቹ ማሰሻዎች አያሳዩዋቸውም.
   
5. ይዘቶችዎ ዘመድ ይኑረው እና የ z-index of 1. እንዲኖራቸው ያድርጉት. ይህም በመደበኛ ደረጃዎች ከሚታዩ አሳሾች በስተጀርባ ምስል ያመጣዋል. ይህንን ወደ እርስዎ ቅጥ ሉህ ውስጥ ያክሉት-

   #content {
   አቀማመጥ: አንጻራዊ;
   z-index: 1;
   }

1. ግን አንተ አልጨረስክም. ኢንተርኔት ኤክስፕሎረር 6 መደበኛ ደረጃዎች እና አሁንም አንዳንድ ችግሮች አሉት. CSS ን ከእያንዳንዱ ማሰሻ መደበቅ የሚቻልበት ብዙ መንገዶች ቢኖሩም ግን IE6 ግን በጣም ቀላሉ (እና ሌሎች ችግሮች ሊያስከትሉ የሚችሉ) ደግሞ ሁኔታዊ አስተያየቶች መጠቀም ነው. በሰነድዎ ራስጌ ቅፅያት የሚከተለውን ቅደም ተከተል ያስቀምጡ.

2. በቀለም የተሰጠው አስተያየት ውስጥ, IE 6 ን ጥሩ ለማጫወት አንዳንድ ቅጦች ጋር ያክሉ

3. በኢንተርኔት IE 7 እና IE 8 መሞከርዎን እርግጠኛ ይሁኑ. አስተያየቶቹን ማስተካከል ሊያስፈልግዎ ይችላል. ሆኖም ግን, ስሞክርም ሥራውን አከናውኗል.

እሺ - ይህ በእርግጥ በልክ ያለፈበት ነው. በጣም ጥቂት ጣቢያዎች IE 7 ወይም 8 ን መቀበል ያስፈልጋቸዋል, በጣም ያነሰ IE6!

በዚህ መንገድ, ይህ አቀራረብ የቆየ እና ያልተለመደ ነው. ሁሉም አሳሾችዎ በጣም ጥሩ ሆነው ሲጫወቱ ከነበረው ይልቅ ምን ያህል አስቸጋሪ ነገሮች እንደነበሩ የማወቅ ፍላጎት ሞዴል በሚል እዚህ እተዋለሁ!

በትንሽ ቦታ ላይ የተቀመጠ የአደባባይ ሁኔታን መልቀም

በድረ-ገጽዎ በ DIV ወይም በሌላ አካል ላይ የተራቀቀ የጀርባ ምስል መሰየም ተመሳሳይ ዘዴ መጠቀም ይችላሉ. አጣዳፊ አቀማመጦችን መጠቀም አለብዎት ወይም ለሌላ የገጽዎ አካል ልዩ ልዩ ክፍተቶች ሲኖርዎት ይሄ ትንሽ ምስና ነው.

1. ምስሉን እንደ ዳራ በሚፈልጉት ገጽ ላይ ያስቀምጡት.

2. በቅጥ ሉሆች ውስጥ ለምስሉ ወርድ እና ቁመት ያዘጋጁ. ማስታወሻ, መቶኛን በስፋት ወይም በስፋት መጠቀም ይችላሉ, ነገር ግን ለከፍተኛው ርዝመት ያላቸውን ርዝመት እሴቶች ለማስተካከል ቀላል ሆኖ አግኝቼዋለሁ.

   img # bg {
   ወ ር: 20 ሜ;
   ቁመት: 30 ሜ;
   }

3. ልክ እንዳደረግነው ሁሉ ይዘትዎን እንደ "ይዘት" መታወቂያዎን በ div ውስጥ ያስቀምጡ:

   ሁሉም ይዘትዎ እዚህ

4. የይዘት መለጠፍ የጀርባ ምስል አንድ አይነት ስፋት እና ቁመት እንዲሆን ቅጥ አድርግ

   ለ # ይዘት #
   ወ ር: 20 ሜ;
   ቁመት: 30 ሜ;
   }

5. ከዛም ይዘቱ ልክ እንደ ምስሉ ተመሳሳይ ቁመት ያስቀምጡት. ስለዚህ ምስልዎ 30 ደካማ ከሆነ የፕላኒንግ አይነት ይኖሩዎታል--30 ኤም; በምስሉ ላይ ያለው የ z-ኢንዴክስ ለማስቀመጥ አትዘንጉ.

   #content {
   አቀማመጥ: አንጻራዊ;
   top: -30em;
   z-index: 1;
   ወ ር: 20 ሜ;
   ቁመት: 30 ሜ;
   }

6. በመቀጠል ከላይ እንዳደረጉት ሁሉ በ IE 6 ተጠቃሚዎች የ -1-z-ኢንዴክስ ውስጥ ያክሉ:

በድጋሚ, በስፋት ከሚታወቀው የአሳሽ ድጋፍ ጋር ተደጋግሞ, ይህ አቀራረብም የማያስፈልግ እና በወቅት ዘመን ውጤት ሆኖ ቀርቧል. ይህንን አካሄድ መጠቀም ከፈለጉ ይህን በተቻለ መጠን በብዙ አሳሾች ላይ መሞከርዎን እርግጠኛ ይሁኑ.

እንዲሁም ይዘትዎ መጠኑን ካስተካከለ የመጫኛዎን መጠን እና የጀርባ ምስልን መለወጥ ያስፈልግዎታል, አለበለዚያ ከሌሎች ያልተለመዱ ውጤቶች ጋር ይቆያሉ.