ሲ.ኤስ.ኤስ.ኤን በመጠቀም የጀርባውን ምስል ወደ አሳሹ መስኮት ሙሉ ስፋት የመዘርጋት ችሎታ የታየው የቅርብ ጊዜውን ዝርዝር ሲለቀቅ ብቻ ነው - CSS3። እንደ አለመታደል ሆኖ እስካሁን ድረስ ብዙ ቁጥር ያላቸው የድር አሳሾች የ CSS3 ዝርዝርን የማይረዱ የመጀመሪያ አሳሾችን እየተጠቀሙ ነው ፡፡ ስለሆነም ምርጫ ማድረግ አለብዎት - ወይም አነስተኛ ምቹ ፣ ግን አሳሽ-አሳሽ መፍትሄን ፣ ወይም ከፍተኛ ቴክኖሎጂን ይጠቀሙ ፣ ግን ለተወሰኑ ታዳሚዎች ፡፡ እስቲ ሁለቱንም አማራጮች እንመርምር ፡፡
አስፈላጊ
የኤችቲኤምኤል እና ሲ.ኤስ.ኤስ መሠረታዊ እውቀት
መመሪያዎች
ደረጃ 1
የመጀመሪያው አማራጭ ቀደም ሲል በ CSS ቋንቋ መግለጫዎች ላይ የተመሠረተ ነው። አንዱ ከሌላው በላይ ሁለት ተደራራቢ ንብርብሮች ያሉት የኤችቲኤምኤል ኮድ መዋቅር መፍጠር ያስፈልግዎታል። ንብርብሮች (ዲቪ) በአሮጌው cascading ቅጥ መግለጫ ቋንቋ ዝርዝር ውስጥ ወደ ማያ ገጹ ስፋት ሊዘረጉ ይችላሉ ፡፡ በንብርብሮች ታችኛው ክፍል ውስጥ የጀርባውን ምስል ማስቀመጥ ያስፈልግዎታል ፣ እና ከላይ በአንዱ ውስጥ ሁሉንም የገጹን ይዘቶች ይቀመጣሉ ፡፡ በሰነዱ አካል ውስጥ እንደዚህ ያለ አወቃቀር እንደዚህ ይመስላል:
ይህ የገጹ ይዘት ይሆናል
እና የዚህ መዋቅር ቅጦች መግለጫ በአርዕስቱ ክፍል ውስጥ መቀመጥ አለበት። ለምሳሌ ፣ ይህ
html ፣ አካል {
ህዳግ: 0px;
ቁመት 100%;
}
# ዳራ {
አቀማመጥ: ፍጹም;
ስፋት 100%;
ቁመት 100%;
}
# ሰው {
አቀማመጥ: ፍጹም;
ስፋት 100%;
ቁመት 100%;
z-index: 2;
}
እዚህ የመታወቂያዎች ዳራ (ይህ የእርስዎ የጀርባ ምስል ነው) እና አካል (ይህ ለገጹ ይዘት ንብርብር ነው) ወደ ፍጹም አቀማመጥ እና 100% ስፋት እና ቁመት ተቀናብረዋል ፡፡ በተጨማሪም ፣ የይዘቱ ንብርብር የመለያ ቁጥር ተመድቧል z-index = 2. እሱ የንብርቦቹን “ጥልቀት” ይወስናል - ትልቁ ሲሆን ይህ ንብርብር ከ “ታች” የበለጠ ይገኛል ፡፡ በእኛ ሁኔታ ፣ ነባሪው የዜ-ኢንዴክስን ከሚጠቀመው ከበስተጀርባው ንብርብር በላይ ይሆናል ፡፡
ደረጃ 2
የተጠናቀቀው ኮድ ይህን ሊመስል ይችላል
html ፣ አካል {
ህዳግ: 0px;
ቁመት 100%;
}
# ዳራ {
አቀማመጥ: ፍጹም;
ስፋት 100%;
ቁመት 100%;
}
# ሰው {
አቀማመጥ: ፍጹም;
ስፋት 100%;
ቁመት 100%;
z-index: 2;
}
ይህ የገጹ ይዘት ይሆናል
የጀርባ ምስል ፋይል ስም fon.
ደረጃ 3
ሁለተኛው አማራጭ በ CSS3 ውስጥ የቀረበውን የጀርባ መጠን ንብረት ይጠቀማል። በተመሳሳይ ጊዜ ቀደም ሲል በአሳሾቹ ሞዚላ ፋየርፎክስ ፣ ጉግል ክሮም እና ኦፔራ በተጠቀሙባቸው የቅጥ ትርጓሜዎች ላይ ተመሳሳይ ባህሪያትን ያክሉ ፡፡ በዚህ ስሪት ውስጥ ያለው የቅጥ መግለጫ ማገጃ እንደዚህ ሊመስል ይችላል
html {
ዳራ: url (fon.png) ምንም-መደጋገም ማዕከል ማዕከል ተስተካክሏል;
-webkit-background-size ሽፋን;
-ሞዝ-ዳራ-መጠን: ሽፋን;
-o-የጀርባ-መጠን: ሽፋን;
የጀርባ መጠን: ሽፋን;
}
እና እዚህ የጀርባ ምስል ፋይልን ስም fon.png"
