የማጠራቀም ጣቢያ: ከበስተጀርባ ስዕል ማድረግ እንደሚችሉ html

ብዙ ተነፍቶ የድር ንድፍ, ብቻ ጣቢያዎች ፍጥረት ማንነት የመቅሰም, ብዙውን ጊዜ html የጀርባ ምስል ማድረግ እንደሚቻል አስባለሁ. ከእነርሱም አንዳንዶቹ ይህን ችግር ለመቋቋም ይችላል ከሆነ, አሁንም መቆጣጠሪያ ላይ ያለውን ምስል አጠቃላይ ስፋት ስትዘረጋ ጊዜ ችግር ነው. በተመሳሳይ ጊዜ ሁሉ አሳሾች ላይ identically ይታያሉ ጣቢያ ማየት እንፈልጋለን, ስለዚህ የመስቀል-አሳሽ መስፈርት ማሟላት አለበት. በሁለት መንገዶች ዳራ ማዘጋጀት ይችላሉ: በመጠቀም HTML መለያዎችን እና CSS ቅጦች. ለራሱ እያንዳንዱ የተሻለ አማራጭ ይመርጣል. ኮዱን በተለየ ፋይል ውስጥ የሚከማች ነው እና ዋና የጣቢያው መለያዎች ውስጥ ተጨማሪ ተናጋሪዎች ሊወስድ አይደለም, ነገር ግን በመጀመሪያ እኛን ጣቢያ ጀርባ ላይ ያለውን ምስል ለመጫን ቀላል ዘዴ እንመልከት ምክንያቱም እርግጥ ነው, CSS ቅጥ, ይበልጥ አመቺ ነው.

መሰረታዊ HTML መለያዎችን በጀርባ ለመፍጠር

ስለዚህ, በማያ ገጹ ላይ HTML ውስጥ የዳራ ምስል እንዴት ያለውን ጥያቄ ይሂዱ. አንድ የግራዲየንት ዳራ ለማድረግ ወይም አንድ ጠንካራ ቀለም ለመቀባት ብቻ በቂ ነው, ነገር ግን እናንተ በጀርባ ምስል ማስገባት ይኖርብናል ከሆነ, ይህ መቆጣጠሪያ ሙሉ ስፋት አልዘረጋችሁብኝም ይሆናል: ውብ ጣቢያ መመልከት እንድንችል, አንድ ይልቅ አስፈላጊ ዝርዝር መረዳት አለባቸው. ምስል ለማንሳት ወይም የጣቢያው ገጽ ማሳየት ይሆናል ውስጥ ይህን ቅጥያ ጋር የራስህን ንድፍ ለማድረግ መጀመሪያ አስፈላጊ ነበር. በጀርባ ምስል ዝግጁ በሚሆኑበት ጊዜ ብቻ ነው: «ምስሎች» የሚባል አቃፊ ውስጥ ይጎትቱት. ውስጥ, ሁላችንም ጥቅም ላይ የዋሉ ምስሎች, እነማዎችን እና ሌሎች የግራፊክ ፋይሎችን ያከማቻል. ይህ አቃፊ ሁሉንም የ html ፋይሎች ጋር የስር አቃፊ ውስጥ የሚገኝ መሆን አለበት. አሁን ላይ እና ኮድ ለማንቀሳቀስ ይችላል. ከበስተጀርባ ያለውን ስዕል ይለውጣል ይህም በጽሁፍ ኮድ በርካታ አማራጮች አሉ.

1. መለያ አይነታ ይጻፉ.
2. የ HTML ኮድ ውስጥ CSS ቅጥ በኩል.
3. በተለየ ፋይል ውስጥ CSS ቅጦች ጻፍ.

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

1. index.htm ፋይል ውስጥ መለያ አይነታ (አካል) በኩል የመጀመሪያው መቅዳት ዘዴ. (አካል ዳራ = "FOLDER_NAME / Nazvanie_kartinki.rasshirenie") (/ አካል): በዚህ ቅጽ ውስጥ የሚከማች ነው. እኛ ርዕስ «ሥዕል» እና ቅጥያ JPG, እና «ምስሎች» ከዚያም ኤችቲኤምኤል-ኮድ ግቤት ይህን ይመስላል: የሚባል አቃፊ ጋር አንድ ስዕል ካለህ ይህ ነው: (አካል ዳራ = "ምስሎች / Picture.jpg") ... (/ አካል) .
2. ሁለተኛው ዘዴ አንድ CSS ቅጥ መቅረጽ ይጨምራል, ነገር ግን ስም index.htm ጋር ተመሳሳይ ፋይል ውስጥ የተጻፈ ነው. (አካል style = "ዳራ: ዩአርኤል ( '../ ምስሎች / Picture.jpg')").
3. ቀረጻ ሦስተኛ ዘዴ ሁለት ፋይሎች ውስጥ ነው. (ራስ) (አገናኝ የ rel = "stylesheet" አይነት = "ጽሑፍ / CSS" href = "http: // ጣቢያ / አንቀጽ / 193110 /% D0% 9F ስም index.htm መለያ (ራስ) ጋር ያለው ሰነድ እንዲህ ያለ መስመር የተጻፈው ነው % D1% 83% D1% 82% D1% 8C_% D0% በአካውንቲንግ CSS_faylu ") (/ ራስ). አንድ ፋይል ተብሎ style.css ቅጥ አስቀድሞ ጻፍ: አካል {የጀርባ: ዩአርኤል (ምስሎች / Picture.jpg ')}.

ከበስተጀርባ ምስልን እንዲያደርጉ የ HTML ውስጥ እንደ እኛ መረዳት. አሁን መላውን ማያ ስፋት በመላ ምስል እዘረጋለሁ እንዴት እንደሆነ ማወቅ ይኖርብናል.

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

እኛ መቶኛ ቅጽ ላይ ያለንን ማያ ይወክላሉ. ይህ ማያ ገጽ ሙሉ ስፋት እና ርዝመት 100% × 100% እንደሚሆን ይንጸባረቅበታል. እኛ ይህንን ስፋት ወደ ምስል መዘርጋት ይኖርብናል. ወደ ማሳያ መላው ስፋት እና ርዝመት ላይ ምስሉን ትዘረጋለህ ምስል ፋይል ቀረጻ style.css መስመር ላይ አክል. ይህ CSS ቅጥ ላይ እንደ ተጻፈ ነው? በጣም ቀላል ነው!

አካል

{

የጀርባ: ዩአርኤል (ምስሎች / Picture.jpg »)

የጀርባ-መጠን: 100%; / * ይህ ልጥፍ * / በጣም ዘመናዊ አሳሾች ተስማሚ ነው

}

ስለዚህ እኛ ማያ ገጹ ላይ HTML ውስጥ ፎቶ ዳራ ማድረግ እንደሚችሉ ደመደምን. በ index.htm ፋይል ውስጥ መቅረጽ አንድ ዘዴ አለ. ይህ ዘዴ እና ያለፈበት ቢሆንም, ነገር ግን ለጀማሪዎች ማወቅ እና መረዳት አስፈላጊ ነው. መለያውን (ራስ) (ዘይቤ) div {የጀርባ-መጠን: ሽፋን; } (/ ቅጥ) (/ ራስ), ይህ መዝገብ እኛ መስኮት ጠቅላላ ስፋት ላይ ሰልጥኖ ይሆናል ይህም ጀርባ, ልዩ አሃድ ይመድባል ማለት ነው. እኛ ምስል ዘመናዊ አሳሾች ውስጥ ማንኛቸውም ውስጥ የማያ መላውን ስፋት ሊያልቅ ነው ዘንድ, የጀርባ ስዕል html ጣቢያ ማድረግ እንደሚችሉ ሁለት መንገዶች ተመልክተናል.

አንድ ቋሚ ዳራ ማድረግ እንደሚቻል

ለወደፊቱ የድር ሀብት ዳራ እንደ ስዕል ለመጠቀም ብትወስን አይደለም ርዝመት ላይ ዘረጋ, እና ውበት መልክ ያበላሻል ነበር ስለዚህም, ከዚያም አንተ ብቻ, ይህ ቋሚ ማድረግ እንደምንችል ማወቅ ይኖርብናል. በቀላሉ አንድ ትንሽ በተጨማሪ ለመመዝገብ የ HTML ኮድ በመጠቀም. አንተ ዳራ በኋላ አንድ ሐረግ ለማከል style.css ማስገባት ይኖርብናል: ዩአርኤል (ምስሎች / Picture.jpg ') ቋሚ; ወይም በምትኩ ኮሎን የተለየ መስመር በኋላ ታክሏል - ቦታ: አስተካክለናል. በመሆኑም, የግድግዳ ወረቀትዎ ቋሚ ይሆናል. በጣቢያው ላይ ይዘትን ማሸብለል ወቅት, እናንተ መስመሮች እየወሰዱ መሆኑን ጽሑፍ ያያሉ, ነገር ግን ከበስተጀርባ ቦታ ላይ ይቆያል. ስለዚህ በርካታ መንገዶች, html የጀርባ ምስል ማድረግ እንደሚቻል ተምሬያለሁ.

ኤች ቲ ኤም ኤል ውስጥ ሠንጠረዦች ጋር መስራት

ብዙ ተላላ የድር ገንቢዎች, ጠረጴዛዎች እና ብሎኮች ሲያጋጥሙን, ብዙውን ጊዜ html ምስል የዳራ ጠረጴዛ እንዲያደርጉ እንዴት መረዳት አይደለም. ሁሉም እንደ ቡድኖች ኤች ቲ ኤም ኤል እና CSS ቅጥ, በድር የፕሮግራም ቋንቋ በትክክል ቀላል ነው. ይህ ችግር መፍትሔ መስመሮች ኮድ ጥንድ ለመጻፍ ነው. አስቀድመህ መለያዎች (tr) እና (TD) እንደሚጠቁመው, በቅደም ረድፎች እና ዓምዶች, አንድ ጠረጴዛ በመጻፍ መሆኑን ማወቅ አለባቸው. ዳራ = ዩአርኤል ስዕሎች: አንድ ምስል መልክ ጠረጴዛው ዳራ ለማድረግ, ይህም መለያ (ሰንጠረዥ), (tr) ወይም (TD) የማጣቀሻ ምስል ማጣቀሻ ጋር ቀላል ሐረግ መጨመር አስፈላጊ ነው. ስለማቋረጥ እኛ ምሳሌዎች አንድ ሁለት መስጠት.

ይልቅ በጀርባ ስዕል ጋር ሰንጠረዥ; ኤችቲኤምኤል ምሳሌዎች

አንድ 2x3 ሠንጠረዥ ሳል እና ወደ አቃፊ "ምስሎች" ውስጥ የተከማቸ የዳራ ምስል: (ጠረጴዛ ጀርባ = "ምስሎች / Picture.jpg") (tr) (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 ዳራ = "ምስሎች / Picture.jpg") 1 (/ TD) (TD) 2 ያስገቡ (/ TD) (TD) 3, (/ TD) (/ tr) (tr) (TD ዳራ = "ምስሎች / Picture.jpg") 4 (/ TD) (TD ዳራ = "ምስሎች / Picture.jpg") 5, ( / TD) (TD ዳራ = "ምስሎች / Picture.jpg") 6 (/ TD) (/ tr) (/ ሰንጠረዥ). እኛ ዳራ ብቻ ብለን በሙሉ ጠረጴዛ የተመዘገበ, እና ሳይሆን ውስጥ ያሉትን ሕዋሳት ውስጥ በሚታየው ማየት ይችላሉ እየተመለከቱ በኋላ.

ክሮስ-አሳሽ ተኳሃኝነት ጣቢያ

አንድ በመስቀል-አሳሽ ተኳሃኝነት ድር ሀብት እንደ እንዲህ ያለ ነገር የለም. ይህ ጣቢያ እኩል እንዲሁም የተለያዩ አይነት እና አሳሾች ስሪቶች ላይ ይታያል ማለት ነው. ይህ መሆን አለበት የ HTML ኮድ አንድ አስፈላጊ አሳሾች ለማበጀት እና CSS ቅጦች. ከዚህም በላይ, ስማርት ስልኮች ዘመናዊ ዘመን ውስጥ, ብዙ የድር ገንቢዎች ጣቢያዎች ለመፍጠር እየሞከሩ ነው እና የተንቀሳቃሽ ስልክ ስሪት እና አንድ ኮምፒውተር መልክ እንዲስማማ.