የመጀመሪያ ጽሑፍ

ሁለተኛ ጽሑፍ

በኤችቲኤምኤል ውስጥ ፣ ለጣቢያው ዳራ አልተገለጸም ፣ ይህ የ CSS ቅጦችን በመጠቀም ነው የተጻፈው ፣ ግን ይህ በንድፈ-ሀሳብ ብቻ ነው። አሁን ይህንን ዳራ እንዴት እንደሚወስኑ እንወቅ።

ዳራ ለድር ጣቢያ ወይም የተለየ ብሎክ

ይህንን ግብ ለማሳካት css ፋይል ስለሚያስፈልገን እሱን መፍጠር እና ከኤችቲኤምኤል ጋር ማገናኘት አለብን። ይህ የተፃፈው ስለ ውስጥ ነው። ከዚህ በኋላ መስራት መጀመር ይችላሉ. በመጀመሪያ, ዳራውን ለማዘጋጀት ምን እንደሚፈልጉ መወሰን ያስፈልግዎታል. መላው ገጽ በአጠቃላይ ከሆነ እንደዚህ ማድረግ ይችላሉ-

አካል (ዳራ-ቀለም: ነጭ;)

ማለትም፣ መላውን ገጻችንን የሚወክል የሰውነት መለያን እንደርስበታለን። የበስተጀርባውን ቀለም ለማዘጋጀት የበስተጀርባ ቀለም ባህሪን ይጠቀሙ። ነገር ግን ከጠንካራ ቀለም ይልቅ ዳራውን ወደ ስርዓተ-ጥለት ማዘጋጀት ቢያስፈልግስ? ከዚያ እንደሚከተለው ይፃፉ።

አካል (ዳራ-ምስል፡ url (ወደ ስዕሉ የሚወስደው መንገድ። የስዕል ቅጥያ))

ግልጽ ለማድረግ, ምሳሌን በመጠቀም ሁሉንም ነገር በበለጠ ዝርዝር ለመመልከት ሀሳብ አቀርባለሁ. ለዚህም ይህንን ምስል እጠቀማለሁ-

ለምሳሌ፣ የጀርባ ምስል፡ url(comp.png) . በዚህ ምሳሌ ኮም የሚባል የጀርባ ምስል አዘጋጅተናል (እኔ የጠራሁት ነው) png ቅርጸት, ይህም ከ css ፋይል ጋር በተመሳሳይ አቃፊ ውስጥ ነው.
በኤችቲኤምኤል ውስጥ የሲኤስኤስ ንብረቶችን አሠራር ለማሳየት ከተወሰኑ ልኬቶች ጋር ብጁ ብሎክን እፈጥራለሁ።

እና ለእሱ ቅጦች እዚህ አሉ

#ct( ዳራ-ምስል፡ url(comp.png)፡ ስፋት፡ 600 ፒክስል፤ ቁመት፡ 400 ፒክስል፤)

ያገኘነው እነሆ፡-

ለምንድነው? እውነታው ግን በነባሪ አሳሹ እገዳውን ሙሉ በሙሉ ለመሙላት ምስሉን ብዙ ጊዜ ይደግማል. አንዳንድ ጊዜ ይህ አስፈላጊ ነው, ለምሳሌ, እንከን የለሽ ቅጦችን ሲጠቀሙ, ግን በእኛ ሁኔታ አንድ ምስል ሊኖር ይገባል. እንደ እድል ሆኖ, ይህ በቀላሉ ማስተዳደር ይቻላል.

ዳራ ይድገሙ

ምስል እንደ ዳራ ካሎት በነባሪነት የገጹን አጠቃላይ ቦታ ለመሙላት በአግድም እና በአቀባዊ ይደገማል። ይህንን ለማስወገድ ከበስተጀርባ የሚደገም ንብረቱን እና የማይደገም እሴቱን ይጠቀሙ። የሚከተሉት እሴቶችም አሉ:

• ድገም-x - በአግድም ብቻ ይድገሙት
• ድገም-y - በአቀባዊ ብቻ

ወደ ግራፊክ ዳራችን ባህሪያት እንጨምር፡-

ዳራ- ድገም: የለም-መድገም;

አቀማመጥ

የበስተጀርባ አቀማመጥ ንብረቱ ምስሉ የሚቀመጥበትን ቦታ ይወስናል. ሁለት እሴቶች እዚህ ተገልጸዋል - በአግድም እና በአቀባዊ. ምሳሌዎች፡ ዳራ-አቀማመጥ፡ ቀኝ ታች - በታችኛው ቀኝ ጥግ ላይ ያለ ቦታ፣ ከላይ-ግራ - በታችኛው የላይኛው ጥግ (እና በነባሪ)፣ 250px 500px - ከግራ የተስተካከለ የላይኛው ጥግወደ ቀኝ በ 250 ፒክስል እና በ 500 ወደታች.

ምሳሌዎችን በተሻለ ሁኔታ እንመልከት፡-

ዳራ-አቀማመጥ: ከላይ በቀኝ;

ስዕሉ ወደ የላይኛው ቀኝ ጠርዝ ይንቀሳቀሳል. እንዲሁም ጫፎቹ እንዲታዩ ብሎክውን ቢጫ ጀርባ ሰጠሁት።

የበስተጀርባ አቀማመጥ: 50% 50%;

ምስሉ በብሎክ ውስጥ በትክክል መሃል ታየ። አዎ፣ አዎ፣ ይህ ለቦታው መቶኛ ቀረጻ ምስጋናም ይቻላል።

ዳራ-አቀማመጥ: 70% 20%;

ዳራ በ 70% በአግድም እና 20% በአቀባዊ ይቀየራል።

እንዲሁም በፒክሰሎች ውስጥ አሉታዊ የአቀማመጥ ዋጋን እንዲገልጽ ተፈቅዶለታል። ይህንን ማድረግ ይቻላል, ለምሳሌ, ትልቅ የስፕሪት ምስል ሲጠቀሙ እና በብሎክ ውስጥ ማስቀመጥ ያስፈልግዎታል ትክክለኛው ክፍልይህ sprite.

ዳራውን ቆልፍ

የጀርባ አባሪ የሚባል አንድ ንብረትም ወድጄዋለሁ። እሱ ሁለት እሴቶች ብቻ ነው ያለው እና የመጀመሪያው ነባሪው (ማሸብለል) ነው። ይህ ማለት ገጹን ሲያሸብልሉ ከበስተጀርባው ይሽከረከራል እና ምስልን ደጋግመው ከተጠቀሙ በመጨረሻ ያበቃል እና ጠንካራ ቀለም ብቻ ይሆናል።

ይህ እንዳይከሰት ለመከላከል ዳራ-አባሪ፡ ቋሚ ተለይቷል እና አሁን ዳራችን ደህንነቱ በተጠበቀ ሁኔታ በቦታው ተስተካክሏል። ይህ ሲገለበጥ ከገጹ ላይ እንዳይጠፋ ለብሎክ ቋሚ ቦታን እንዴት እንደሚገልጹት ጋር ሊመሳሰል ይችላል.

የዚህ ሁሉ መልካምነት አህጽሮተ ቃል

ዳራ ለመፍጠር የሚያስችሉዎትን ብዙ ንብረቶችን ተወያይተናል ነገርግን ሁሉንም ከተጠቀሙበት መጨረሻ ላይ ከባድ ቀረጻ ይደርሳሉ። በጣም አሉ። የሚያምር መፍትሄ. የበስተጀርባ ንብረቱ የተለየ ቦታ እንዲጽፉ ይፈቅድልዎታል የሚያስፈልጉ ቅንብሮችበዚህ ቅደም ተከተል፡-
ዳራ: የቀለም ምስል የፒን አቀማመጥ ይድገማል;
እና አሁን ሁሉም ነገር እንደሚከተለው ሊፃፍ ይችላል-

ዳራ፡ ቢጫ url(comp.png) አይደገምም 20% 100px;

አንዳንድ ንብረቶች መገለጽ ካላስፈለገ በቀላሉ ተትቷል (በእኛ ሁኔታ የጀርባ አባሪ አልጻፍንም)።

ብዙ ዳራዎች

ብዙ የበስተጀርባ ምስሎች ቢፈልጉስ? ይከሰታል, ምን ማድረግ ይችላሉ? ዛሬ CSS ይህንን ባህሪ ይደግፋል። እኛም እንሞክረው። ነዚ ኣይኮንኩን ንውሰድ

ላፕቶፕ ደወልኩለት።

እና መልቲ ፎን ለማስገባት ኮድ እዚህ አለ፡-

ዳራ፡ url(comp.png) አይደገም 20% 100px፣ url(laptop.png) ምንም-መድገም 50% 50%; ዳራ-ቀለም: ቢጫ;

እንደሚመለከቱት, ከመጀመሪያው ምስል በኋላ ኮማ ማድረግ እና ለሁለተኛው ቅንብሮችን ማስገባት ብቻ ያስፈልግዎታል. በዚህ ሁኔታ, አንድ ጠንካራ ቀለም በተናጠል ማዘጋጀት የተሻለ ነው.

በተመሳሳይ መንገድ, የፈለጉትን ያህል ተጨማሪ ስዕሎችን መቅዳት ይችላሉ, ነገር ግን ከመጠን በላይ አይውሰዱ - በጣም ብዙ ግራፊክስ በጣም ጥሩ አይደሉም.

ይህን ጽሁፍ ላቋረጠው የምፈልገው እዚህ ላይ ነው። ከበስተጀርባው ጋር ብዙ ሌሎች አስደሳች ነገሮችን ማድረግ ይችላሉ ፣ ስለእነሱ ወደፊት ለመፃፍ እሞክራለሁ (እና አንድ ነገር ቀደም ሲል ጽፌያለሁ - ለምሳሌ ፣)። ይህንን ንብረት በማሰስዎ መልካም ዕድል።

ሰላም ሁላችሁም! ትሑት አገልጋይህ ከጠቃሚ እና ከአንተ ጋር ግንኙነት አለው። ተግባራዊ ቁሳቁስለድር ጣቢያ ዳራ እንዴት ማዘጋጀት እንደሚቻል በሚለው ርዕስ ላይ። ይህ የኤችቲኤምኤል አቀማመጥ መጀመሪያ ነው እና እዚህ እንዴት ማድረግ እንዳለብኝ በምሳሌ አሳይቻለሁ ቆንጆ ዳራበእርግጠኝነት የኢንተርኔት ተጠቃሚን የሚያገናኝ እና ኦርጅናሉን ለሚጨምር ጣቢያ።

ካስተዋሉ፣ አብዛኛዎቹ የኢንተርኔት ነጋዴዎች በሽያጭ እና በምዝገባ ገጻቸው ውስጥ ይጠቀማሉ ልዩ ዳራ. ዛሬ የዚህን ሂደት ቴክኒካዊ አካል እንመረምራለን.

ስለዚህ, በመጀመሪያ, በእርግጥ, ስዕል እንፈልጋለን. ውስጥ የውጭ ኢንተርኔትየተለያዩ በነፃ ማውረድ የሚችሉበት አንድ በጣም ጥሩ ጣቢያ አለ። ስዕሎች ለድር ጣቢያ ዳራ. በቀላሉ በጣም ብዙ ቁጥር ያላቸው እዚያ አሉ። ጣቢያው ስውር ቅጦች ይባላል።

በመጀመሪያ ደረጃ በ Google የፍለጋ ሞተር ዝርዝር ውስጥ ይታያል, ስለዚህ ለስራ እመክራለሁ. እንዲሁም ማግኘት ይችላሉ ብዙ ቁጥር ያለውሌሎች ድረ-ገጾች በፍለጋ ሞተር ውስጥ እንደ “የጀርባ ምስል ቅጦች”፣ “የጀርባ ምስልን ለጣቢያ አውርድ” እና የመሳሰሉትን ከጻፉ።

በእንግሊዘኛ ቋንቋ ምንም ችግር ከሌለዎት, ያለችግር ይረዱታል.

በዚህ ጽሑፍ ውስጥ አንድ ርዕስ መርጫለሁ እና tweed ይባላል. ማውረድ ትችላለህ።

በድረ-ገጹ ላይ በትንሽ ስሪት ውስጥ ይህ ይመስላል

መጀመሪያ እንፈጥራለን አዲስ ሰነድበአንድ ፕሮግራም ውስጥ

እና ከማስተካከልዎ በፊት, ለምሳሌ በስም ውስጥ ማስቀመጥዎን ያረጋግጡ ኢንዴክስ.htmlእና በኮምፒተር ላይ አቃፊ ይፍጠሩ, ለምሳሌ, "የእኔ ጣቢያ" አቃፊ መፍጠር እና የእኛን ማስቀመጥ ይችላሉ ማውጫ ፋይል(index.html) .በላይ አቃፊ መፍጠር የተሻለ ነው የእንግሊዘኛ ቋንቋ, በአሳሹ ውስጥ ምንም ግራ መጋባት እንዳይኖር እና የጣቢያው የተሳሳተ ማሳያ.

ከዚህ በተጨማሪ በዋናው አቃፊ ውስጥ "የእኔ ጣቢያ" ሁለት ተጨማሪ ንዑስ አቃፊዎችን መፍጠር ያስፈልግዎታል, በአንደኛው ውስጥ ሁሉንም ስዕሎቻችንን እናስቀምጣለን እና "ምስሎች" ይባላል, ሌላኛው ደግሞ "CSS" (cascading style) ብለን እንጠራዋለን. ሉሆች) እና ፋይሉን እዚያ ያስቀምጡት style.css

አሁን በእኛ ሰነድ ውስጥ መሥራት እንችላለን. ቀጣዩ ደረጃ ባዶውን ማስገባት ያስፈልገናል html ኮድ, ሁሉም የሚጀምሩበት መሰረታዊ ፍሬም ተብሎ የሚጠራው. በቀጥታ ማውረድ ይችላሉ. በመቀጠል ሁሉንም ነገር ከዚህ ፋይል ገልብጠን ወደ ፕሮግራማችን ፋይል እናስተላልፋለን። የመጨረሻው ውጤት እንደሚከተለው መሆን አለበት

ከፋይሉ ስም ቀጥሎ ቀይ ፍሎፒ ዲስክ ታያለህ። ስለዚህ, ቀይ ከሆነ, ፋይሉ አልተቀመጠም ማለት ነው, ዲስኬቱ ወደ ሰማያዊነት እንዲቀየር የማዳን ቁልፍን ጠቅ ማድረግዎን ያረጋግጡ.

ውስጥ ርዕስ መለያየሰነዱን ስም መቀየር ይችላሉ, ለምሳሌ "የእኔ የመጀመሪያ ድረ-ገጽ" ማድረግ ይችላሉ. እና ገጽዎ በኮዲንግ ውስጥ መቀመጡን ያረጋግጡ UTF-8

አለበለዚያ, የተለየ ኢንኮዲንግ ካለ, ለምሳሌ ዊንዶውስ-1251, ከዚያም በአሳሹ ውስጥ ያለው የሰነዱ ጽሑፍ በሂሮግሊፍስ ውስጥ ይታያል. በፕሮግራሙ የመሳሪያ አሞሌ ላይ በ "ኢንኮዲንግ - በ Utf-8 (ያለ BOM)" ክፍል ውስጥ ኢንኮዲንግ መቀየር ይችላሉ.

እና የምንወስዳቸውን እርምጃዎች ሁሉ ማዳንዎን አይርሱ.

አሁን በሰነዳችን ውስጥ ዳራ መፍጠር እንጀምር። ወዲያውኑ እላለሁ በድረ-ገጽ ንድፍ ላይ የምናደርጋቸው ድርጊቶች በሙሉ CSS የሚባሉ የካስካዲንግ ስታይል ሉሆችን በመጠቀም ይከናወናሉ ማለትም ፍሬሙን በኤችቲኤምኤል ውስጥ እንፈጥራለን እና ወደ እሱ እናመጣዋለን። ቆንጆ ዘይቤእና CSS ን ተጠቅመን እንየው።

በዚህ መንገድ ትክክለኛውን የእርምጃዎች ቅደም ተከተል እራስዎን ያስተምራሉ. በትክክል አትቁም html ሰነድቅጦችን ለመቋቋም ካልፈለጉ በተለየ ሰነድ ውስጥ ማስቀመጥ የተሻለ ነው.

ይህንን በእኛ ውስጥ ለማድረግ የማስታወሻ ደብተር ፕሮግራም++ ሌላ ፋይል እንፍጠር እና Style.css ብለን እንጠራዋለን እና በአዲስ እናስቀምጠው css አቃፊ, ውስጥ ይሆናል የተጋራ አቃፊ"የእኔ ጣቢያ"

በጣም ጥሩ! አሳሽ ገፁን በትክክል እንዲያሳይ የቅጥ ወረቀቱን ከኤችቲኤምኤል ሰነዳችን ጋር ማገናኘት አለብን። እንዴት እንደሚደረግ እነሆ

ከላይ ያለውን ሙሉውን መስመር በቀጥታ እንገባለን. በዚህ መስመር የእኛን የቅጥ ሉህ እናገናኘዋለን.
አሁን ለአካላችን መለያ ዳራ ምስል በቅጥ ሉህ በኩል እንገልፃለን። ይህንን ለማድረግ, በሰነዱ ውስጥ style.css እንፈጥራለን የሚከተለው መዋቅር(ብቻ ይውሰዱት እና በፕሮግራሙ ኮድ ውስጥ ይፃፉ)

እዚህ ላይ ትንሽ ላብራራ። የበስተጀርባ ባህሪው ብዙ እሴቶች አሉት፣ አንደኛው ዳራ-ተደጋጋሚ ነው፣ እሱም ለድር ሰነዱ የበስተጀርባ ምስላችንን የመዘርጋት ሃላፊነት አለበት።

ዳራ - ድገም

ድገም //(በአግድም እና በአቀባዊ ዘርጋ) ድገም-X // (በአግድም ብቻ ዘረጋ) ድገም-Y //(በቋሚዎች ብቻ) አይ-ድገም //(የጀርባውን ምስል አትድገም)

በእኛ ሁኔታ, የእኛን ትንሽ ስእል በአቀባዊ እና በአግድም እንደግመዋለን. በውጤቱም, መላው ገጽ በእኛ ምስል ተሞልቷል. በአሳሹ ውስጥ ይህ ይመስላል።

እንዲሁም በተለይ ለጣቢያው የሚያምር ዳራ ማውረድ የምትችልባቸው ጣቢያዎችን መርጫለሁ።

ዘመናዊ አሳሾች ወደ አንድ አካል እንዲጨምሩ ያስችሉዎታል የዘፈቀደ ቁጥርየጀርባ ምስሎች፣ በነጠላ ሰረዞች የተለዩ የእያንዳንዱን ዳራ መለኪያዎች መዘርዘር። ሁለንተናዊ ዳራ ንብረቱን መጠቀም እና ለእሱ አንድ ዳራ በመጀመሪያ እና ሁለተኛውን በነጠላ ሰረዞች መለየት በቂ ነው።

ዳራውን ወደ መስኮቱ ሙሉ ስፋት እንዴት እንደሚዘረጋ?

ዳራውን ለመለካት የበስተጀርባውን መጠን ንብረቱን ይጠቀሙ ፣ እሴቱን ወደ 100% ያቀናብሩ ፣ ከዚያ ዳራ የአሳሹን መስኮት አጠቃላይ ስፋት ይይዛል። ለቆዩ የአሳሾች ስሪቶች በምሳሌ 1 ላይ እንደሚታየው ከቅድመ ቅጥያ ጋር የተወሰኑ ንብረቶችን መጠቀም አለቦት።

የጀርባ ምስል ወደ ድረ-ገጽ እንዴት እንደሚታከል?

የበስተጀርባ ምስልን ወደ ድረ-ገጽ ለመጨመር በቅጡ ዩአርኤል እሴት ውስጥ ወደ ምስሉ የሚወስደውን መንገድ ያዘጋጁ የጀርባ ባህሪያት, እሱም በተራው ወደ ሰውነት መምረጫው ውስጥ ይጨመራል.

አኒሜሽን ዳራ መስራት ይቻላል?

አኒሜሽን በቂ ነው። ጠንካራ አቀባበል, ማንኛውንም ሰነድ ወደ ህይወት ማምጣት የሚችል, ስለዚህ ትልቅ ተወዳጅነት ማግኘቱ ምንም አያስደንቅም. የፍላሽ ቴክኖሎጂካርቱን ወደ ድረ-ገጾች የሚጨምር፣ እሱም በይነተገናኝም ነው። ግራፊክ ቅርጸትጂአይኤፍ እንዲሁ ይደግፋል ቀላል እነማበክፈፎች ቅደም ተከተል ለውጥ. ስለዚህ ምስልን በዚህ ቅርጸት በመጠቀም ብቻ ሳይሆን ማንቃት ይቻላል የግለሰብ ስዕሎች፣ ግን የድረ-ገጽ ዳራ ወይም የአንድ የተወሰነ አካል።

በመጀመሪያ አኒሜሽን ምስል መፍጠር ያስፈልግዎታል GIF ቅርጸትፕሮግራሙን ምን ሊጠቀሙበት ይችላሉ አዶቤ ፎቶሾፕወይም ለዚህ ዓላማ ተስማሚ የሆነ ሌላ. እንደ ዳራ ምስል ሊያገለግሉ የሚችሉ ዝግጁ-አኒሜሽን ፋይሎች ቤተ-መጻሕፍትም አሉ። በመቀጠል ምስሉ በምሳሌ 1 ላይ እንደሚታየው የጀርባ ዘይቤ ባህሪን በመጠቀም እንደ ዳራ ይታከላል።

በገጹ ታችኛው ቀኝ ጥግ ላይ የጀርባ ምስል እንዴት እንደሚቀመጥ?

በገጹ ላይ ያለውን የጀርባ ምስል አቀማመጥ ለመቆጣጠር, የበስተጀርባ አቀማመጥ ንብረቱ ጥቅም ላይ ይውላል, የምስሉን አግድም እና ቋሚ መጋጠሚያዎች በአንድ ጊዜ ያዘጋጃል. የበስተጀርባ ምስልን መድገም ለመሰረዝ የበስተጀርባ አቀማመጥ ንብረቱን አትድገም ከሚለው እሴት ጋር ተጠቀም።

ዳራ እንዳይደገም እንዴት መከላከል እችላለሁ?

በነባሪ፣ የበስተጀርባው ምስል በአግድም እና በአቀባዊ ይደገማል፣ ይህም በመላው የድረ-ገጹ መስክ ላይ ሞዛይክ ይፈጥራል። ነገር ግን, ይህ የጀርባ ባህሪ ሁልጊዜ አያስፈልግም, በተለይም በነጠላ ምስል ሁኔታ, ስለዚህ እርዳታ ይመጣልከበስተጀርባ የቅጥ ንብረት ላይ የማይደገም እሴት ታክሏል።

ዳራውን በአቀባዊ ብቻ እንዲደግም እንዴት ማድረግ እችላለሁ?

ከድረ-ገጽ ኤለመንት ወይም መስኮት ቁመት ጋር የተሳሰሩ የጌጣጌጥ መስመሮችን ወይም ቀስቶችን ለመፍጠር የበስተጀርባ መደጋገም በተለምዶ ያስፈልጋል። በእንደዚህ ዓይነት ሁኔታዎች, የንጥረ ነገሮች መጠን ምንም ይሁን ምን, ዳራውን በአቀባዊ መደጋገም ወጥ የሆነ ምስል ያቀርባል. መጀመሪያ ላይ ብቻ የበስተጀርባ ምስል ያለ ስፌት መደገሙን ማረጋገጥ አለብዎት።

ብዙ ጀማሪ የአቀማመጥ ዲዛይነሮች፣ ድረ-ገጾችን የመፍጠር ምንነት ላይ በጥልቀት ሲመረምሩ፣ ብዙ ጊዜ ዳራውን በኤችቲኤምኤል ውስጥ ምስል እንዴት እንደሚሰራ ያስባሉ። እና አንዳንድ ሰዎች ይህን ተግባር ማወቅ ቢችሉም, ምስሉን በጠቅላላው የመቆጣጠሪያው ስፋት ላይ ሲዘረጋ አሁንም ችግሮች ይነሳሉ. በተመሳሳይ ጊዜ, ጣቢያው በሁሉም አሳሾች ላይ እኩል እንዲታይ እፈልጋለሁ, ስለዚህ የአሳሽ መስፈርቱ መሟላት አለበት. ዳራውን በሁለት መንገድ ማቀናበር ይችላሉ-የ CSS ዘይቤን በመጠቀም። ሁሉም ሰው ለራሱ የበለጠውን ይመርጣል ምርጥ አማራጭ. በእርግጠኝነት፣ የሲኤስኤስ ቅጥበጣም ምቹ ፣ ምክንያቱም ኮዱ በተለየ ፋይል ውስጥ ስለሚከማች እና በጣቢያው ዋና መለያዎች ውስጥ ተጨማሪ አምዶችን አይወስድም ፣ ግን በመጀመሪያ በጣቢያው ጀርባ ላይ ምስልን የመጫን ቀላል ዘዴን እንመረምራለን ።

ዳራ ለመፍጠር መሰረታዊ HTML መለያዎች

እንግዲያው፣ ወደ ጥያቄው እንሂድ፣ በ html ውስጥ ያለው ዳራ በመላው ስክሪን ላይ። ጣቢያው ውብ ሆኖ እንዲታይ አንድ ነገር መረዳት ያስፈልግዎታል፡- አስፈላጊ ዝርዝር: ቀላል ለማድረግ በቂ ቀስ በቀስ ዳራወይም በጠንካራ ቀለም ይሳሉት, ነገር ግን ምስልን ወደ ዳራ ማስገባት ከፈለጉ በጠቅላላው የመቆጣጠሪያው ስፋት ላይ አይዘረጋም. መጀመሪያ ላይ የጣቢያዎ ገጽ በሚታይበት ቅጥያ ምስል መምረጥ ወይም ንድፍ እራስዎ ማድረግ ያስፈልግዎታል። የበስተጀርባ ምስሉ ዝግጁ ከሆነ በኋላ ብቻ "ምስሎች" ወደሚባል አቃፊ ያስተላልፉ. በውስጡም ሁሉንም ያገለገሉ ስዕሎችን, እነማዎችን እና ሌሎችን እናከማቻለን ግራፊክ ፋይሎች. ይህ አቃፊ ከሁሉም የእርስዎ ጋር በስር ማውጫ ውስጥ መሆን አለበት። html ፋይሎች. አሁን ወደ ኮዱ መቀጠል ይችላሉ። ዳራውን ወደ ስዕል የሚቀይር ኮድ ለመጻፍ ብዙ አማራጮች አሉ።

1. የመለያ ባህሪ ይፃፉ።
2. በኤችቲኤምኤል ኮድ ውስጥ በ CSS ዘይቤ።
3. የ CSS ዘይቤን በተለየ ፋይል ውስጥ ይፃፉ።

ዳራውን በኤችቲኤምኤል ውስጥ ምስል እንዴት መስራት እንደሚቻል የእርስዎ ምርጫ ነው፣ ግን እንዴት በጣም ጥሩ እንደሚሆን ጥቂት ቃላት ማለት እፈልጋለሁ። የመጀመሪያው ዘዴ፣ በመለያ ባህሪ በኩል መፃፍን በመጠቀም፣ ከረጅም ጊዜ በፊት ጊዜ ያለፈበት ነው። ሁለተኛው አማራጭ በጣም አልፎ አልፎ ጥቅም ላይ ይውላል, ምክንያቱም ብዙ ተመሳሳይ ኮድ ስለተገኘ ብቻ ነው. እና ሦስተኛው አማራጭ በጣም የተለመደው እና ውጤታማ ነው. እዚህ HTML ምሳሌዎችመለያዎች

1. ለመጻፍ የመጀመሪያው መንገድ በ index.htm ፋይል ውስጥ ባለው የመለያ ባህሪ (አካል) በኩል ነው. የተጻፈው በሚከተለው ቅጽ ነው፡ (የሰውነት ዳራ= "አቃፊ_ስም/Image_name.extension")(/አካል)። ማለትም "ሥዕል" የሚባል ሥዕል ካለን እና JPG ቅጥያ, እና አቃፊውን "ምስሎች" ብለን ሰይመንታል, ከዚያ የኤችቲኤምኤል ኮድ መግቢያው እንደዚህ ይመስላል: (body background="Images/Picture.jpg")… (/body)።
2. ሁለተኛው የመቅዳት ዘዴ በ CSS ዘይቤ ላይ ተጽዕኖ ያሳድራል, ነገር ግን index.htm ተብሎ በሚጠራው ተመሳሳይ ፋይል ነው የተጻፈው. (የሰውነት ዘይቤ = "ዳራ: url ("../Images/Picture.jpg")).
3. እና ሶስተኛው የመቅዳት ዘዴ በሁለት ፋይሎች ውስጥ ነው የተሰራው. index.htm በሚባል ሰነድ ውስጥ የሚከተለው መስመር ተጽፏል፡ (ራስ)(link rel="stylesheet" type="text/css" href="Path_to_CSS_file")(/ጭንቅላት)። እና style.css በሚባለው የቅጥ ፋይል ውስጥ አስቀድመን እንጽፋለን፡ አካል (ዳራ፡ url(Images/Picture.jpg))።

በኤችቲኤምኤል ውስጥ የጀርባ ምስል እንዴት እንደሚሰራ ተወያይተናል። አሁን ምስሉን በጠቅላላው ማያ ገጽ ስፋት ላይ እንዴት እንደሚዘረጋ መረዳት ያስፈልግዎታል.

የጀርባ ምስልን ወደ መስኮቱ ስፋት ለመዘርጋት መንገዶች

የእኛን ማያ ገጽ በመቶኛ እናስብ። የስክሪኑ አጠቃላይ ስፋት እና ርዝመት 100% x 100% እንደሚሆን ተገለጠ። ምስሉን ወደዚህ ስፋት መዘርጋት ያስፈልገናል. በ style.css ፋይል ውስጥ የምስሉ ግቤት ላይ አንድ መስመር እንጨምር፣ ይህም ምስሉን ወደ ሙሉው ስፋት እና የመቆጣጠሪያው ርዝመት ይዘረጋል። ይህ በCSS ዘይቤ እንዴት ተፃፈ? ቀላል ነው!

ዳራ፡ url(ምስሎች/Picture.jpg)

የጀርባ መጠን: 100%; /* ይህ ግቤት ለብዙዎች ተስማሚ ነው። ዘመናዊ አሳሾች */

ስለዚህ ሙሉውን ስክሪን ለመሙላት በኤችቲኤምኤል ውስጥ እንደ ዳራ ምስል እንዴት እንደሚሰራ አውቀናል. በ index.htm ፋይል ውስጥ የመጻፍ መንገድም አለ. ይህ ዘዴ ጊዜ ያለፈበት ቢሆንም ለጀማሪዎች እንዲያውቁት እና እንዲረዱት ያስፈልጋል. በ(ራስ)(ስታይል) div (የጀርባ መጠን፡ ሽፋን) (/style) (/head) መለያ፣ ይህ ግቤት ለጀርባ ልዩ ብሎክ እንመድባለን ማለት ነው፣ ይህም በጠቅላላው ስፋት ላይ የሚቀመጥ ይሆናል። መስኮት. የድር ጣቢያን ዳራ ለማድረግ 2 መንገዶችን ተመልክተናል html ሥዕልበማንኛውም ዘመናዊ አሳሽ ውስጥ ምስሉ በጠቅላላው የስክሪኑ ስፋት ላይ እንዲዘረጋ።

ቋሚ ዳራ እንዴት እንደሚሰራ

ስዕልን እንደ የወደፊት የድር ምንጭ ዳራ ለመጠቀም ከወሰኑ ታዲያ ርዝመቱን እንዳይዘረጋ እና የውበት ገጽታውን እንዳያበላሹ እንዴት እንቅስቃሴ አልባ ማድረግ እንደሚችሉ ማወቅ ያስፈልግዎታል። ይህንን ትንሽ ተጨማሪ ከእርዳታ ጋር ለመጻፍ ቀላል ነው. ከበስተጀርባ በኋላ በ style.css ፋይል ውስጥ አንድ ሀረግ ማከል ያስፈልግዎታል: url (Images/Picture.jpg") ተስተካክሏል፤ ወይም ይልቁንስ ከሴሚኮሎን በኋላ የተለየ መስመር ያክሉ - አቀማመጥ: ቋሚ። የጀርባ ስዕልእንቅስቃሴ አልባ ይሆናል። በጣቢያው ላይ ያለውን ይዘት ሲያሸብልሉ ያንን ያያሉ። የጽሑፍ ሕብረቁምፊዎችመንቀሳቀስ ፣ ግን ዳራ በቦታው እንዳለ ይቆያል። ስለዚህ በኤችቲኤምኤል ውስጥ የጀርባ ምስል እንዴት እንደሚሠሩ በተለያዩ መንገዶች ተምረዋል።

በኤችቲኤምኤል ውስጥ ካለው ሰንጠረዥ ጋር በመስራት ላይ

ብዙ ልምድ የሌላቸው የድር ገንቢዎች ከጠረጴዛዎች እና ብሎኮች ጋር ሲጋፈጡ ብዙውን ጊዜ በኤችቲኤምኤል ውስጥ ምስልን እንደ የጠረጴዛ ዳራ እንዴት እንደሚሠሩ አይረዱም። ልክ እንደ ሁሉም የሲኤስኤስ ቅጦች፣ ይህ የድር ፕሮግራሚንግ ቋንቋ በጣም ቀላል ነው። እና ለእንደዚህ አይነት ችግር መፍትሄው ሁለት የኮድ መስመሮችን መጻፍ ይሆናል. የሰንጠረዥ ረድፎችን እና ዓምዶችን መፃፍ እንደ (tr) እና (td) መለያዎች እንደየቅደም ተከተላቸው እንደሚጠሩ ማወቅ አለቦት። የሠንጠረዡን ዳራ በምስል መልክ ለመሥራት በ(ሠንጠረዡ)፣ (tr) ወይም (td) መለያ ላይ የምስሉን ማገናኛ የሚያመለክት ቀላል ሐረግ ማከል አለብህ፡ ዳራ = የምስሉ URL። ግልጽ ለማድረግ፣ ሁለት ምሳሌዎችን እንስጥ።

ከበስተጀርባ ይልቅ ስዕል ያላቸው ጠረጴዛዎች፡ HTML ምሳሌዎች

2x3 ሠንጠረዥ እንሳል እና ዳራውን በ"ምስሎች" አቃፊ ውስጥ የተቀመጠ ምስል እናድርገው፡ (የሠንጠረዥ ዳራ = "Images/Picture.jpg") (tr) (td) (td)1(/td) (td)2(/td) (td) 3) (/td) (/tr) (tr) (td) 4 (/td) (td) 5 (/td) (td) 6 (/td) (/tr) (/ሠንጠረዥ). በዚህ መንገድ የእኛ ጠረጴዛ በስዕሉ ዳራ ላይ ይሳሉ.

አሁን ተመሳሳዩን ጠፍጣፋ ከ 2x3 ልኬቶች ጋር እንሳል ፣ ግን ስእል በተቆጠሩት አምዶች 1 ፣ 4 ፣ 5 እና 6 ውስጥ አስገባ። (ሠንጠረዥ)(tr)(td background = “Images/Picture.jpg”)1(/td) (td) )2 (/td) (td)3(/td)(/tr) (tr)(td background = “Images/Picture.jpg”)4(/td) (td background = “Images/Picture.jpg”) 5 (/td) (td ዳራ = “ምስሎች/ሥዕል.jpg”)6(/td) (/tr) (/ሠንጠረዥ)። ከተመለከትን በኋላ, ጀርባው በእነዚያ በተመዘገብንባቸው ሴሎች ውስጥ ብቻ እንደሚታይ እናያለን, እና በጠቅላላው ሰንጠረዥ ውስጥ አይደለም.

የጣቢያው ተሻጋሪ አሳሽ ተኳኋኝነት

እንደ የድር ሃብት ተሻጋሪ አሳሽ ተኳሃኝነት ያለ ነገርም አለ። ይህ ማለት የጣቢያው ገፆች በትክክል በ ውስጥ ይታያሉ ማለት ነው የተለያዩ ዓይነቶችእና የአሳሽ ስሪቶች. በዚህ አጋጣሚ የኤችቲኤምኤል ኮድ እና የሲኤስኤስ ዘይቤን ለማስማማት ማበጀት ያስፈልግዎታል አስፈላጊ አሳሾች. በተጨማሪም ፣ በ ዘመናዊ ጊዜየስማርትፎኖች እድገት ፣ ብዙ የድር ገንቢዎች የተስተካከሉ ድር ጣቢያዎችን ለመፍጠር እየሞከሩ ነው። የሞባይል ስሪቶችእና በኮምፒተር እይታ ስር.