CSS የጀርባ ግልጽነት. የሲ ጋር ግልጽነት ጀርባ ወይም ጽሑፍ

CSS3 ድር ንድፍ መፈልሰፍ ጋር በብዙ መንገዶች ለመስራት ቀላል እና ይበልጥ ምክንያታዊ ሆኗል: በኋላ ሁሉ, አሁን በእርግጥ flexibly ያነሰ በተደጋጋሚ ጃቫስክሪፕት በመጠንሰስ, ማንኛውም ነገር ማበጀት ይችላሉ. የአምላክ ከበስተጀርባ ያለውን ግልፅነት ማስተካከል አለብዎት አይበል - የሲ ወዲያውኑ በርካታ አማራጮችን ይሰጣል.

ባህሪያት ስብስብ በተወሰነው የጀርባ (የጀርባ-ምስል, የጀርባ-አቋም , የጀርባ-መጠን, የጀርባ-ተደጋጋሚ, የጀርባ-አባሪ, የጀርባ-አመጣጥ, የጀርባ-ክሊፕ, ከበስተጀርባ-ቀለም), የ አይነታ ስር በተናጠል የተመደበ ወይም ሊቀናጅ ይችላል እያንዳንዱ መካከል ዳራ. በእኛ በዝርዝር ከእነርሱ እያንዳንዱ እንመርምር.

የጀርባ-ቀለም አይነታ

የሲ ውስጥ, ከበስተጀርባ ቀለም አንድ ሄክስ ኮድ, ቀለም ስም ወይም RGB-ግቤት በመጠቀም: በበርካታ መንገዶች ውስጥ ማዘጋጀት ይቻላል. CSS3 ውስጥ ይልቅ RGBA ጋር RGB-ቀረጻ አማራጭ መጠቀም ይቻላል ሆነ.

የጀርባ ቀለም: # FFDAB9 የአስራስድስትዮሽ ቀለም ኮድ በፍርግርጉ በኋላ ንብረት ላይ ተመዝግቦ ይገኛል. በዚህ ግቤት ላይ ቁምፊዎች ተመሳሳይ ጥንዶች ናቸው ከሆነ ኮድ አብዛኛውን ጊዜ ጥቂት መቆረጥ ነው: # ccff00 # cf0 እንደ የተጻፈ ይቻላል:

አካል {background-color: # cf0 ;}.

ስሙ እንኳን በጣም የማይገኙ ቀለማት ነው. ለምሳሌ ያህል, ወደ መደበኛ ቀይ እና NavajoWhite (#FFDEAD) ወይም Honeydew2 (# E0EEE0) መጠቀም ይችላሉ ነጭ በተጨማሪ:

አካል {background-color: ሐምራዊ; }.

የመጨረሻውን አማራጭ RGB ነው ወይም RGBA ግቤት ቀለም ሳይሆን የሲ ጀርባ ያለውን ግልፅነት ብቻ ሳይሆን እንዲገልጹ ያስችልዎታል, ነገር ግን ስልት ብቻ 9 በላይ የቆዩ IE ስሪቶች ውስጥ ይሰራል. ሌሎች አሳሾች ግልፅነት ጋር መደበኛ ስሪት እንገነዘባለን. የ W3C መስፈርቶች መሠረት ገና ይልቅ ይበልጥ እንደተለመደው አርጂቢ ምክንያት RGBA መጠቀም ይመረጣል.

RGBA በጀርባ ውስጥ የመጨረሻው ዋጋ እና 1 (የኦፔክ) 0 (ግልጽነት) ከ ከልነት ያዘጋጃል.

አንዳንድ ያልተለመደ እሴቶች አሉ. ዳራ ቀለም ያለውን HSL እና HSLA በመጠቀም ሊዘጋጅ ይችላል. ሁለቱም CSS3 ይጨመሩለት ነበር; ስለዚህም IE ስሪት 9 ወይም ከዚያ በላይ የተደገፉ አይደሉም. የወል መጠሪያ ብቻ የተለየ ቅርጸት ተመሳሳይ አርጂቢ ወይም RGBA: ቀለም (ጥላ - ዲግሪ ውስጥ የተሰጠ የቀለም ጎማ ላይ እሴት,), ሙሌት (ሙሌት - ከ 0 እስከ 100 በመቶኛ ቀለም እኛነታችንን), ቅሌትን (ቅሌትን - ብሩህነት, ሙሌት ግቤት በተመሳሳይ የሚለካው ).

የጀርባ-ምስል አይነታ

የ ግልጽ ዳራ በጣም መስቀል-የአሳሽ ስሪት - ይህ ምስል መጠቀም ነው. CSS3 ውስጥ, እንኳን ተጨማሪ ምስሎችን ማዘጋጀት ይችላሉ, ይህ ሰረዝ በኩል ነው የሚደረገው. ለምሳሌ:

{የጀርባ-አካል ምስል: url (bg1.png), ዩ አር ኤል (bg2.png)}.

እንኳን IE8 በመደገፍ በዚህ መንገድ. ወደ አቀማመጥ ላይ የዋለውን የጎማ ዳራ ውስጥ በርካታ ምስሎች. በአስፈላጊ ሁኔታ, ተጠቃሚዎች በቀላሉ አንድ ምስል መስቀል ይችላሉ እንደ ማንኛውም ምስል መጠቀም እና CSS ውስጥ ጀርባ ቀለም ለማዘጋጀት አይርሱ.

የጀርባ-ቦታ አይነታ

እርስዎ በጀርባ አሀድ ማዘጋጀት ምስል የሚጠቀሙ ከሆነ, የሲ እርስዎ ማያ ላይ በማንኛውም ቦታ ምስሉን አቀማመጥ ያስችልዎታል. ነባሪ, ምስል በላይኛው ግራ ጥግ ላይ ይገኛል. አይነታ የቃል መመሪያዎች (ከላይ, ከታች, ቀኝ, ወደ ግራ), የቁጥር (ፍላጎት, ፒክስል እና ሌሎች ዩኒቶች) ወይ ይወስዳል. በዚህ ሁኔታ ውስጥ, እናንተ አግድም እና ቋሚ ሁለት እሴቶች, መግለጽ አለበት:

አካል {background-አቋም: ቀኝ ማእከል ;} - በዚህ ምሳሌ ውስጥ, ምሳሌ ገጹ, ተመሳሳይ ወደ ምስል ርቀት የላይኛው እና ታችኛው ክፍል በስተቀኝ በኩል በሚገኘው ይሆናል.

የጀርባ-መጠን አይነታ

አንዳንድ ጊዜ የሲ ዳራ እዘረጋለሁ ወይም መጠኑን ለመቀነስ አስፈላጊ ነው. ይህን ለማድረግ, ወደ መገለጫ ባህሪ ዳራ-መጠን, እና ፒክስል ወይም መቶኛ ውስጥ ማዘጋጀት ይቻላል በጀርባ መጠን, እና ሌሎች ክፍሎችን መጠቀም.

ይህ አይነታ ጋር, አንዳንድ ችግሮች አሉ; አሳሹ ቅድመ መካከል ቀደም ሲል ስሪቶች ውስጥ ዳራ ትክክለኛ ማሳያ ጥቅም ላይ ዘንድ. እርግጥ ነው, የአሁኑ ስሪት ሙሉ በሙሉ ይህንን አይነታ የሚደግፍ እና የተወሰኑ ንብረቶች አስፈላጊነት ጠፋ.

የጀርባ-አባሪ አይነታ

ይህ አይነታ ማሸብለል ሳለ ከበስተጀርባ ምስሎች ባህሪ ይገልጻል. ስለዚህ, (የ ውረሱ በዚህ ርዕስ ውስጥ ከተመለከትናቸው ባህሪያት ለሁሉም ጠቅላላ ጨምሮ አይደለም) 3 እሴቶች መውሰድ ይችላሉ:

• ቋሚ - ቋሚ ዳራ ላይ ያለውን ስዕል ያደርጋል;
• scroll - ንጥረ የቀሩት ጋር ዳራ ጥቅልሎች;
• አካባቢያዊ - ማሸብለል ይዘት ያለው ከሆነ ጀርባ ላይ ያለውን ምስል scrolled ነው. ወደ ፍሬም ይዘቶች ባሻገር የሚሄድ ዳራ የተወሰነ ነው.

አጠቃቀም ምሳሌ:

አካል {background-attachment: ቋሚ}.

በአሁኑ ጊዜ, ፋየርፎክስ የመጨረሻ ንብረት (አካባቢያዊ) አይደግፍም.

የጀርባ-ምንጭ አይነታ

ይህ አይነታ አቀማመጥ ኤለመንት ኃላፊነት ነው. የቅድመ አሳሾች ቅድመ መጠቀምን ይጠይቃል. ንብረት ራሱ ሦስት ግቤቶች አሉት:

• መለያ ወደ ፍሬም ያለውን ውፍረት ይዞ ሳለ ድብዳብ-ሳጥን, ጠርዝ ጥለት ወደ አንጻራዊ ቦታ ላይ ነው;
• የድንበር መስመር ሊሆን ይችላል ውስጥ ካለፈው የተለየ ድንበር-ሳጥን ባህሪያት ሙሉ በሙሉ ወይም በከፊል ጥለት መደራረብ;
• ይዘት-ሳጥን አቀማመጥ ምስል ይዘቱ pryavyazyvaya.

በርካታ እሴቶች እንዲገልጹ ከሆነ, አሳሾች በራሳቸው መንገድ ምላሽ ይችላሉ: Firefox እና Opera ላይ ብቻ የመጀመሪያው አማራጭ እመለከታለሁ.

የጀርባ-ድገም አይነታ

በጀርባ ምስል በተጠቀሰው ከሆነ ደንብ ሆኖ, ይህ በአግድም ወይም ሽቅብ በተደጋጋሚ መሆን አለበት. ይህ እና መገለጫ ባህሪ ዳራ-ድገም ተጠቅሟል. በመሆኑም የማገጃ ዳራ, እንዲህ ያለ ንብረት የያዘውን የሲ የተለያዩ መለኪያዎች ውስጥ አንዱን ማድረግ ይችላሉ:

• ምንም-ድገም - ምስሉን በአንድ ስሪት ውስጥ በአንድ ገጽ ላይ ይታያል;
• መደጋገም - ዳራ በ x እና y ውስጥ ተደግሟል;
• መድገም-x - ብቻ በአግድመት;
• መድገም-y - ብቻ ሽቅብ;
• ቦታ - ዳራ ተደጋጋሚ, ነገር ግን ቦታ ሥዕሎች መካከል መሙላት የማይቻል ከሆነ ባዶ ብቅ ነው;
• ክብ - ይህም ሙሉ ስዕሎች መላውን አካባቢ ሙላ አይደለም ከሆነ ምስል, የተመጣጠኑ ነው.

ባህሪያት ምሳሌ:

አካል {background-ተደጋጋሚ: ይመሌሳሌ ተደጋጋሚ ተደጋጋሚ} - ተመሳሳይ ዳራ-ተደጋጋሚ: መድገም-y.

በኮማ የተለዩ መለኪያዎች, ዝርዝር ጊዜ CSS3 ውስጥ በርካታ ምስሎች እሴቶች መግለጽ ይችላሉ.

የጀርባ-ቅንጥብ አይነታ

ይህ አይነታ (የ ነጠብጣብ ፍሬሞች ሁኔታ ውስጥ, ለምሳሌ) ወሰኖች ስር ዳራ ባህሪ ያስቀምጣል:

• ድብዳብ-ሳጥን - የ የማገጃ ያለውን የውስጥ ውስጥ የሚታየውን ዳራ;
• ድንበር-ሳጥን - ምስሉን ወደ ማዕቀፍ ስር ይመጣል;
• ይዘት-ሳጥን - በጀርባ ላይ ያለውን ስዕል ብቻ ይዘት ውስጥ ይታያል.

አጠቃቀም ምሳሌ:

አካል {background-ክሊፕ: content- ሳጥን;}.

Chrom እና Safari -webkit- ቅጥያ ይጠይቃሉ.

መጋረድ ባህሪያት እና ማጣሪያ

CSS ንብረት በሁሉም አሳሾች ውስጥ ይሰራሉ - ከልነት መገለጫ እርስዎ በጀርባ ያለውን ግልፅነት እንዲያዋቅሩ ያስችልዎታል. ዋጋ 0.0 ከ ያካተተ 1.0 ወደ ክልል ውስጥ የተዘጋጀ ነው. በዚህ ሁኔታ ውስጥ, የ CSS ጀርባ ያለውን ግልጽነት ማዘጋጀት ይችላሉ ይልቅ 0.3 ምንም የኢንቲጀር እሴት .3 ለመጻፍ በቂ ነው:

.block {የጀርባ-ምስል: url ( img.png); ከልነት: .3;}.

ከበስተጀርባ ከልነት ማዘጋጀት, የሲ ያለውን የማጣሪያ አይነታ ለመጠቀም, ሌላው ቀርቶ በዘጠነኛው ስሪት ከዚህ በታች ከ IE ተስማሚ ነው:

.block {የጀርባ-ምስል: url ( img.png); ማጣሪያ: አልፋ (ከልነት = 30)}.

ከልነት በመጠቀም ግልጽ ብቻ በጀርባ ይሆናል, ነገር ግን ደግሞ ዩኒት ውስጥ ሁሉንም አባሎች ጊዜ በዚህ ሁኔታ ውስጥ, ከልነት ዋጋ ከልነት RGBA ርስት በኩል የተለያዩ ግልጽነት ቅንብሮች ይስጡ መሆኑን 0 እና 100. ማስታወሻ መካከል ተዘጋጅቷል.

ሁልጊዜ ይደውሉና አሳሾች እና ሌሎች አገሮች የእርስዎ አጠቃቀም ስታትስቲክስ መከታተል. ሁሉም DTP ያለው ትልቁ ችግር - ከ IE የቆዩ ስሪቶች, እነሱ ሙሉ መጠን CSS3 እንዲጠቀም አትፍቀድ. አቀማመጥ ውስጥ አሳሽዎ ማንኛውም የሲ ንብረት የሚደግፍ መሆኑን ማረጋገጥ ልዩ አገልግሎቶችን መጠቀም አይርሱ. እናንተ አሳሾች የቆዩ ስሪቶች መጫን አይችልም ከሆነ, መስመር ላይ በርካታ አሳሾች ውስጥ ያለውን ጣቢያ ሥራ ይፈትሻል አገልግሎት ማግኘት.