CSS బహుళ బ్యాక్‌గ్రౌండ్

ఈ చాప్టర్లో, మీరు ఒక ఎలిమెంట్కు బహుళ బ్యాక్‌గ్రౌండ్ చిత్రాలను జోడించడానికి ఎలా నేర్చుకుంటారు.

మీరు కూడా కొన్ని గుణాలను నేర్చుకుంటారు:

  • background-size
  • background-origin
  • background-clip

CSS బహుళ బ్యాక్‌గ్రౌండ్

CSS ద్వారా మీరు పరిశీలించవచ్చు: background-image గుణం ఒక ఎలిమెంట్కు బహుళ బ్యాక్‌గ్రౌండ్ చిత్రాలను జోడించడానికి ఉపయోగించబడుతుంది.

వివిధ బ్యాక్‌గ్రౌండ్ చిత్రాలను కామస్ తో వేరు చేయవచ్చు, మరియు వాటిని ఒకదాని మీద మరొకటిగా పెట్టబడతాయి, వీటిలో మొదటి చిత్రం వీక్షకునికి సమీపంలో ఉంటుంది.

ఈ ఉదాహరణలో రెండు బ్యాక్‌గ్రౌండ్ చిత్రాలు ఉన్నాయి, మొదటి చిత్రం పుష్పం (క్రింది మరియు కుడివైపు సరిపోయేది), రెండవ చిత్రం పత్రం బ్యాక్‌గ్రౌండ్ (ఎడమ మరియు పైకి సరిపోయేది):

ఉదాహరణ

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

亲自试一试

బహుళ బ్యాక్‌గ్రౌండ్ చిత్రాలను ప్రత్యేక బ్యాక్‌గ్రౌండ్ గుణాలు (పైన పేర్కొన్నది) లేదా background సరళ గుణాలను నిర్దేశించడానికి ఉపయోగించవచ్చు:

ఈ ఉదాహరణలో ఉపయోగించబడింది: background సరళ అటువంటి గుణాలు (ముంది ఉదాహరణతో సమానం):

ఉదాహరణ

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

亲自试一试

CSS బ్యాక్‌గ్రౌండ్ సైజు

CSS background-size బాగా బ్యాక్‌గ్రౌండ్ సైజు ప్రతిపాదిస్తుంది.

బ్యాక్‌గ్రౌండ్ చిత్రం పరిమాణాన్ని నిర్దేశించడానికి నేరుగా పొడవులు, ప్రతిశతాలు లేదా ఈ రెండు కీలకాంశాలలో ఒకటిని ఉపయోగించవచ్చు:contain లేదా cover.

ఈ ఉదాహరణలో బ్యాక్‌గ్రౌండ్ చిత్రం పరిమాణాన్ని ప్రారంభ చిత్రం కంటే చాలా చిన్నదిగా మార్చబడుతుంది (పిక్సెల్స్ ద్వారా ఉపయోగించబడింది):

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

ఈ కోడ్ ఇలా ఉంటుంది:

ఉదాహరణ

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

亲自试一试

background-size బాగా బ్యాక్‌గ్రౌండ్ సైజు మరికొన్ని సాధ్యమైన విలువలు ఉన్నాయి: contain మరియు cover.

contain కీలకాంశం బ్యాక్‌గ్రౌండ్ చిత్రాన్ని ఎక్కువగా స్కేల్‌చేస్తుంది (కానీ దాని వెడల్పు మరియు పొడవు అంతర్గత ప్రాంతంతో సమానంగా ఉండాలి). ఈ విధంగా, బ్యాక్‌గ్రౌండ్ చిత్రం మరియు బ్యాక్‌గ్రౌండ్ లొకేషన్ ప్రాంతం ప్రాపర్షన్ నిర్బంధంతో పరిమితంగా, కొన్ని బ్యాక్‌గ్రౌండ్ ప్రాంతాలు బ్యాక్‌గ్రౌండ్ చిత్రంతో ఆవరించబడకపోవచ్చు.

cover కీలకాంశాలు బ్యాక్‌గ్రౌండ్ చిత్రాన్ని స్కేల్‌చేస్తాయి కాబట్టి అంతర్గత ప్రాంతాన్ని పూర్తిగా బ్యాక్‌గ్రౌండ్ చిత్రం ఆవరిస్తుంది (దాని వెడల్పు మరియు పొడవు అంతర్గత ప్రాంతంతో సమానంగా లేదా అధికంగా ఉంటాయి). ఈ విధంగా, బ్యాక్‌గ్రౌండ్ లొకేషన్ ప్రాంతంలో కొన్ని బ్యాక్‌గ్రౌండ్ చిత్రం భాగాలు కనిపించకపోవచ్చు.

దిగువన ఉన్న ఉదాహరణలు ప్రదర్శిస్తాయి: contain మరియు cover ఉపయోగం విధానం:

ఉదాహరణ

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

亲自试一试

బహుళ బ్యాక్‌గ్రౌండ్ చిత్రాల సైజును నిర్వచించండి

బహుళ బ్యాక్‌గ్రౌండ్ నిర్వహణలో కాల్పనికంగా ఉంటుంది:background-size బాగా బ్యాక్‌గ్రౌండ్ సైజు మరికొన్ని విలువలను అంగీకరించవచ్చు (కామా ద్వారా వేరు చేయబడిన జాబితాలో ఉన్నాయి).

ఈ ఉదాహరణలో మూడు బ్యాక్‌గ్రౌండ్ చిత్రాలు నిర్దేశించబడినవి, ప్రతి చిత్రంకి వేరే background-size విలువలు ఉన్నాయి:

ఉదాహరణ

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat, 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

亲自试一试

పూర్తి విస్తీర్ణం బ్యాక్‌గ్రౌండ్ చిత్రం

ఇప్పుడు, మేము వెబ్ సైట్ పై బ్యాక్‌గ్రౌండ్ చిత్రాన్ని బ్రౌజర్ విండో మొత్తం విస్తీర్ణంలో విస్తరించేలా కావలసినది.

ప్రత్యేక అవసరాలు ఈ కింద ఉన్నాయి:

  • చిత్రం ద్వారా పేజీని పూర్తిగా నింపుము (పాటుపై కాలువలు లేకుండా)
  • అవసరప్రకారం చిత్రాన్ని స్కేల్ చేయండి
  • పేజీలో చిత్రాన్ని మధ్యలో ఉంచండి
  • స్క్రోల్ బార్ ను ముందుకు తీసుకురావదు

దిగువన ఉన్న ఉదాహరణలు దానిని సాధించడానికి చూపుతాయి: <html> అనునది (<html> అనునది బ్రౌజర్ విండో ఎత్తును కనీసం కలిగి ఉంటుంది). అప్పటికే దానిపై స్థిరంగా మరియు మధ్యలో ఉండే బ్యాక్‌గ్రౌండ్ చిత్రాన్ని సెట్ చేయండి. ఆపై background-size అనునది విలువను సర్దుబాటు చేయండి:

ఉదాహరణ

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

亲自试一试

హేరో ఇమేజ్

మీరు <div> పైన వివిధ బ్యాక్‌గ్రౌండ్ అనునదులను వాడి హేరో ఇమేజ్ (పాఠం కలిగిన పెద్ద చిత్రం) సృష్టించవచ్చు మరియు మీకు కావలసిన స్థానంలో ఉంచవచ్చు.

ఉదాహరణ

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

亲自试一试

CSS background-origin అట్రిబ్యూట్

CSS background-origin ఈ అనునది బ్యాక్‌గ్రౌండ్ చిత్రం స్థానాన్ని నిర్ణయిస్తుంది.

ఈ అనునది మూడు వివిధ విలువలను అంగీకరిస్తుంది:

  • border-box - బ్యాక్‌గ్రౌండ్ చిత్రం బార్డర్ బాక్స్ యొక్క ఎడమ పైకి ప్రారంభం చేయుము
  • padding-box - బ్యాక్‌గ్రౌండ్ చిత్రం ప్యాడింగ్ బాక్స్ యొక్క ఎడమ పైకి ప్రారంభం చేయుము (అప్రమేయం)
  • content-box - బ్యాక్‌గ్రౌండ్ చిత్రం కంటెంట్ బాక్స్ యొక్క ఎడమ పైకి ప్రారంభం చేయుము

దిగువన ఉన్న ఉదాహరణలు ప్రదర్శిస్తాయి: background-origin అనునది స్పష్టం చేస్తుంది:

ఉదాహరణ

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

亲自试一试

CSS background-clip అట్రిబ్యూట్

CSS background-clip ఈ అనునది బ్యాక్‌గ్రౌండ్ చిత్రం చేయు ప్రాంతాన్ని నిర్ణయిస్తుంది.

ఈ అనునది మూడు వివిధ విలువలను అంగీకరిస్తుంది:

  • border-box - బ్యాక్‌గ్రౌండ్ చిత్రం బార్డర్ బాక్స్ యొక్క బాహ్య సరిహద్దు వరకు చేయుము (అప్రమేయం)
  • padding-box - బ్యాక్‌గ్రౌండ్ చిత్రం ప్యాడింగ్ బాక్స్ యొక్క బాహ్య సరిహద్దు వరకు చేయుము
  • content-box - కంటెంట్ బాక్స్ లో బ్యాక్‌గ్రౌండ్ చిత్రం చేయుము

దిగువన ఉన్న ఉదాహరణలు ప్రదర్శిస్తాయి: background-clip అనునది స్పష్టం చేస్తుంది:

ఉదాహరణ

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

亲自试一试

CSS 高级背景属性

属性 描述
background 用于在一条声明中设置所有背景属性的简写属性。
background-clip 规定背景的绘制区域。
background-image ఒక ఎలిమెంట్‌కు ఒకటి లేదా అనేక బ్యాక్‌గ్రౌండ్ ఇమేజ్‌లను నిర్దేశించండి.
background-origin బ్యాక్‌గ్రౌండ్ ఇమేజ్ స్థానాన్ని నిర్ణయించండి.
background-size బ్యాక్‌గ్రౌండ్ ఇమేజ్ పరిమాణాన్ని నిర్ణయించండి.