CSS ን በመጠቀም የምላሽ ንድፍ ምስሎችን እንዴት እንደሚጨመር እነሆ
በዛሬው ጊዜ ታዋቂ የሆኑ ድህረ-ገጾችን ተመልከቱ እና ለማየት የሚፈልጉት አንድ ትልቅ የዲዛይን ህክምና ትልቅ ነው. እነኚህን ምስሎች ማከል ከሚፈጠሩ ችግሮች አንዱ ድርጣቢያዎች ለተለያዩ የማያ ገጽ መጠኖች እና መሳሪያዎች ምላሽ መስጠት ከሚያስፈልገው ምርጥ ልምምድ ነው - ምላሽ ሰጪ ድር ንድፍ ይባላል .
የድር ጣቢያዎ ገጽ አቀማመጥ ከተለወጠ እና ከተለያየ ማያ ገጽ መጠኖች ጋር ስኬተኛ እንደመሆኑ, እነዚህ የጀርባ ምስሎችም የእነሱን መጠኖች መጠንን ማሳደግ አለባቸው.
በእርግጥ እነዚህ "ፈሳሽ ምስሎች" በጣም ጥሩ ምላሽ ከሚሰጡ ድርጣቢያዎች (ፈሳሽ ፍርግርግ እና ሚድያ መጠይቆች) አንዱ ነው. እነዚህ ሶስት አባባሎች ከመጀመሪያው ጀምሮ ምላሽ ሰጪ የድርድር ንድፍ ናቸው, ነገር ግን ቀጥታ የመስመር ውስጥ ምስሎችን ወደ አንድ ጣቢያ ማከል ቀላል ነው (ውስጠ-መስመር ምስሎች እንደ ኤችቲኤምኤል ማተሪያዎች ምስጠራዎች ናቸው). (የሲኤስኤስ የጀርባ ባህሪዎችን በመጠቀም ገጽ ውስጥ የተቀመጡት) ለበርካታ የድር ዲዛይኖች እና የፊት ለፊቶች ገንቢዎች ከፍተኛ ተግዳሮት ሆኗል. ደስ የሚለው ነገር, በሲኤስኤል ውስጥ "የኋላ-ገጽታ" ንብረቶች መጨመር ይሄንን እውን እንዲሆን አድርጎታል.
በተለየ ጽሑፍ ውስጥ, የሲኤስ 3 ን የጀርባ ገጽታ መጠን እንዴት በመስኮቱ ለመገጣጠም ምስሎችን ለመለጠፍ እንዴት እንደሚሸፍን , ነገር ግን ለእዚህ ንብረት ለማሰማራት በጣም የተሻለና ጠቃሚ መንገድ አለ. ይህንን ለማድረግ, የሚከተሉትን ንብረት እና የእሴት ዋጋን እንጠቀማለን:
የዳራ-መጠን: ሽፋን;
የሽፋን ቁልፍ ቃል ባህሪው አሳሹ መስኮቱን ለማመጣጠን ምስሉን ለማሳመር ምስሉን ለማሳመር አሳሽ ያሳድገዋል. ምስሉ መላውን ማያ ገጽ ለመሸፈን ተስተካክሏል, ነገር ግን የመጀመሪያው መጠን እና ምጥጥነ ገፅታው ሳይነካ ይቀራል, ምስሉ ራሱ የተዛባ እንዳይሆን.
ምስሉ የመስኮቱ አጠቃላይ ገጽታ እንዲሸፍን ተደርጎ ምስሉ በተቻለ መጠን በስፋት ውስጥ እንዲቀመጥ ተደርጓል. ይህ ማለት በርስዎ ገጽ ላይ ምንም ባዶ ቦታ ወይም በምስሉ ላይ ምንም ማዛባት አይኖርዎትም ማለት ነው, ነገር ግን ምስሉ በማያ ገጹ ልዩነት እና በሚታየው ምስል መሠረት አንዳንድ ምስሎቹ ሊቆረጡ ይችላሉ ማለት ነው. ለምሳሌ, የአንድ ምስል (የዓለሙ, የታችኛው, የግራ ወይም የቀኝ) ጠርዝ ምስሎች ለባህረ-ገፅታ ንብረቶች በሚጠቀሙባቸው ዋጋዎች ላይ በመወሰን በምስሎቹ ላይ ሊጠፋ ይችላል. ዳራውን "ከላይ ወደ ግራ" ካስተዋሉ በምስሉ ላይ ያለ ማንኛውም ትርፍ በቀስ እና በቀኝ ጎኖች ይወገዳል. የጀርባውን ምስል መሃል ላይ ከደረስክ የጭንቅላቱ ክፍል ከሁሉም ጎኖቹ ይወገዳል, ነገር ግን ከልክ በላይ መጨመር ሲሰራጭ, በማናቸውም ወገን ላይ ያለው ተፅዕኖ ያነሰ አገልግሎት ላይኖረው ይችላል.
የጀርባ መጠንን እንዴት መጠቀም እንደሚቻል: ሽፋን;
የጀርባ ምስልዎን ሲፈጥሩ ትልቅ የሆነ ምስል መፍጠር ጥሩ ሃሳብ ነው. አሳሾች በምስላዊ ጥራት ላይ አፅንኦት የሌለው ምስል እንዲቀንሱ ማድረግ ቢቻልም, አሳሽ ከመጀመሪያው ልኬቶች ይልቅ መጠኑ ከፍ ያለ ምስል ሲያወጣ, የምስል ጥራት ጥራቱ እየጨመረ, ብዥታ እና ፒክሰል ተደርጎ ይባክናል. የዚህኛው ተጨባጭ ወደ ትውስታዎች ሁሉ ግዙፍ ምስሎችን እያስተላለፉ የእርስዎ ገጽ አፈፃፀም ያሳምጣል.
ይህን በሚያደርጉበት ጊዜ እነዚያን ምስሎች ለማውረድ ፍጥነት እና ለድር አገልግሎት መዘጋጀትዎን ያረጋግጡ. በመጨረሻም, በቂ የሆነ የምስል መጠንና ጥራቱ እንዲሁም ለትራፊክ ፍጥነቶች ምክንያታዊ የፋይል መጠን ማግኘት በሚፈልጉ መካከል ማግኘት ያስፈልግዎታል.
ያንን ምስል ወደ ገጽ ሙሉ ገጽ እንዲወስድ በሚፈልጉበት ጊዜ, ያንን ገጽ በሰፊው እና በዴስክቶፕ ኮምፒተር ላይ ሲታይ, ወይም ያነሰ እና ወደ በእጅ የሚያዙ, ተንቀሳቃሽ ስልክ መሳሪያዎች.
ምስልዎን በድር አስተናጋጅዎ ላይ ይስቀሉ እና እንደ የጀርባ ምስል ወደ የ CSS ያክሉት:
የጀርባ-ምስል: url (fireworks-over-wdw.jpg);
ጀርባ-ተደጋጋሚነት: አይ-ተደጋጋሚ;
ዳራ-አቀማመጥ: ማእከል;
በስተጀርባ-አባሪ: ቋሚ
አሳሹ ቅድመ-ቅጥያውን ሲሲኤስ መጀመሪያ አክል:
-webkit-background-size: cover;
-moz-background-size: ሽፋን;
-የ-ዳራ-መጠኑ: ሽፋን;
ከዚያ የ CSS ባህሪን ያክሉ:
የዳራ-መጠን: ሽፋን;
ተለዋዋጭ የተለያዩ ምስሎችን በመጠቀም
ለዴስክቶፕ ወይም ለላፕቶፕ ተሞክሮ ምላሽ ሰጪ ንድፍ አስፈላጊ ቢሆንም ድርን መድረስ የሚችሉ የተለያዩ መሳሪያዎች በከፍተኛ ደረጃ እያደጉ መጥተዋል, እናም ከዚህ ጋር የተለያየ መጠን ያላቸው የማሳያ መጠኖች ይመጣሉ.
ቀደም ሲል እንደተጠቀሰው በስርጭተሩ ላይ በጣም በጣም ሰፊ ምላሹ የሆነ ምስል መጫን, ለምሳሌ ውጤታማ ወይም የመተላለፊያ ይዘት ያለው ንድፍ አይደለም.
በሚታዩባቸው መሳሪያዎች ላይ ተገቢነት ያላቸውን ምስሎች ለማቅረብ የመገናኛ ዘዴዎችን እንዴት መጠቀም እንደሚችሉ ይረዱ እና በተጨማሪም ከተንቀሳቃሽ መሳሪያዎች ጋር በመሆን የድር ጣቢያዎትን ተኳሃኝነት ያሻሽሉ.
የመጀመሪያው ጽሑፍ በጄነር ኬርኒን. በጄረሚ ጊራርድ የተስተካከለው 9/12/17