ఒక వెబ్ పుటను అమర్చుటకు నేపథ్య చిత్రాన్ని తీయుటకు CSS3 ను ఉపయోగించండి

ఆకర్షణీయమైన వెబ్సైట్ డిజైన్లలో చిత్రాలు ముఖ్యమైనవి. ఇది నేపథ్యం చిత్రాల ఉపయోగం కలిగి ఉంటుంది. ఈ చిత్రాలు మరియు గ్రాఫిక్స్ ఉపయోగిస్తారు వెనుక కంటెంట్ పేజీలలో భాగంగా ప్రదర్శించబడే చిత్రాలకు వ్యతిరేకంగా పేజీ యొక్క ప్రాంతాలు. ఈ నేపధ్య చిత్రాలు ఒక పేజీకి దృశ్యపరమైన ఆసక్తిని చేర్చగలవు మరియు మీరు ఒక పేజీలో చూస్తున్న దృశ్య రూపకల్పనను సాధించడంలో మీకు సహాయపడతాయి.

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

ఒక నేపథ్య స్థలాన్ని విస్తరించడానికి ఈ కోరిక వెబ్ డిజైనర్ల కోసం చాలా సాధారణ కోరిక. ప్రతి చిత్రం ఒక వెబ్సైట్ యొక్క ప్రదేశంలో సరిపోదు. ఒక స్థిర పరిమాణాన్ని సెట్ చేయడానికి బదులుగా, చిత్రం విస్తరించడం బ్రౌజర్ విండో ఎంత విస్తృతమైనది లేదా ఇరుకైనప్పటికీ, పేజీకి తగినట్లుగా అమలవుతుంది.

ఒక పేజీ యొక్క నేపథ్యాన్ని సరిపోయే విధంగా ఒక చిత్రాన్ని విస్తరించడానికి ఉత్తమమైన మార్గం, నేపథ్య పరిమాణం కోసం, CSS3 ఆస్తిని ఉపయోగించడం. ఇక్కడ ఒక పేజీ యొక్క శరీరం కోసం నేపథ్య చిత్రాన్ని ఉపయోగించే ఒక ఉదాహరణ మరియు ఇది 100% పరిమాణాన్ని సెట్ చేస్తుంది, తద్వారా అది ఎల్లప్పుడూ స్క్రీన్కు సరిపోయేలా ఉంటుంది.

శరీరం { నేపథ్య: url (bgimage.jpg) పునరావృతం కాదు; నేపథ్య పరిమాణం: 100%; }

Caniuse.com ప్రకారం, ఈ ఆస్తి IE 9+, Firefox 4+, Opera 10.5+, సఫారి 5+, Chrome 10.5+, మరియు అన్ని ప్రధాన మొబైల్ బ్రౌజర్లలో పనిచేస్తుంది. ఇది నేడు అందుబాటులో ఉన్న ఆధునిక బ్రౌజర్ల కోసం మీకు వర్తిస్తుంది, దీని అర్థం మీరు ఈ లక్షణాన్ని ఇతరుల స్క్రీన్పై పనిచేయని భయం లేకుండా ఉపయోగించాలి.

పాత బ్రౌజర్లలో విస్తరించబడ్డ నేపథ్యాన్ని పొందుతారు

మీరు IE9 కంటే పాత ఏ బ్రౌజర్లు మద్దతు అవసరం అని చాలా అవకాశం ఉంది, కానీ మీరు IE8 ఈ ఆస్తి మద్దతు లేదు ఆందోళన చేస్తున్నారని ఊహించుకోవటం తెలియజేయండి. ఆ సందర్భంలో, మీరు ఒక విస్తరించిన నేపథ్య నకిలీ చేయవచ్చు. మరియు మీరు ఫైర్ఫాక్స్ 3.6 కోసం బ్రౌజర్ పూర్వపదాలను ఉపయోగించవచ్చు-moz-background- పరిమాణం) మరియు Opera 10.0 (-o-background- పరిమాణం).

నకిలీ నేపథ్య వ్యాపాన్ని నకిలీ చేయడానికి సులభమైన మార్గం మొత్తం పేజీలో ఇది విస్తరించడం. అప్పుడు మీరు అదనపు స్థలంతో ముగుస్తుంది లేదా విస్తరించిన ప్రాంతంలో మీ టెక్స్ట్ సరిపోతుందో ఆందోళన చెందనవసరం లేదు. దీన్ని ఎలా చేయాలో ఇక్కడ ఉంది:

id = "bg" />

1. మొదట, అన్ని బ్రౌజర్లు 100% ఎత్తు, 0 అంచులు, మరియు 0 పాడింగ్లను కలిగి ఉన్నాయని నిర్ధారించుకోండిHTML BODY అంశాలు. మీ HTML పత్రం యొక్క తలపై కింది ఉంచండి:
2. మీరు వెబ్ పేజీ యొక్క మొదటి అంశంగా నేపథ్యంగా ఉండాలని కోరుకునే చిత్రాన్ని జోడించండి, మరియు దానిని ఇవ్వండి ఐడి "BG" యొక్క:
3. నేపథ్య చిత్రంను ఉంచండి తద్వారా అది ఎగువ మరియు ఎడమవైపున స్థిరపరచబడి 100% వెడల్పు మరియు ఎత్తులో 100% ఉంటుంది. దీన్ని మీ శైలి షీట్కు జోడించు:
   1. img # bg {
   3. స్థానం: పరిష్కరించబడింది;
   5. top: 0;
   7. ఎడమ: 0;
   9. వెడల్పు: 100%;
   11. ఎత్తు: 100%;
   13. }
4. మీ అన్ని విషయాన్ని పేజీ లోపలికి చేర్చండి DIV ఒక తో మూలకం ఐడి "కంటెంట్" యొక్క. జోడించు DIV చిత్రం క్రింద:ఇక్కడ మీ అన్ని కంటెంట్ - శీర్షికలు, పేరాలు, మొదలైనవి
   1. గమనిక: ఇప్పుడే మీ పేజీని చూడండి ఆసక్తికరంగా ఉంటుంది. చిత్రం విస్తరించబడాలి, కానీ మీ కంటెంట్ పూర్తిగా లేదు. ఎందుకు? ఎందుకంటే నేపథ్య చిత్రం ఎత్తులో 100%, మరియు కంటెంట్ విభజన తరువాత పత్రం ప్రవాహం లో చిత్రం - చాలా బ్రౌజర్లు అది ప్రదర్శించదు.
5. మీ కంటెంట్ను సాపేక్షంగా ఉంచండి మరియు ఇది ఒకదానిని కలిగి ఉంటుంది z-index యొక్క 1. ఇది ప్రమాణాల-కంప్లైంట్ బ్రౌజర్లలో నేపథ్య చిత్రం పైన ఇది తెస్తుంది. దీన్ని మీ శైలి షీట్కు జోడించు:
   1. # కంటెంట్ {
   3. స్థానం: సాపేక్ష;
   5. z- సూచిక: 1;
   7. }
6. కానీ మీరు పూర్తి చేయలేదు. ఇంటర్నెట్ ఎక్స్ప్లోరర్ 6 ప్రమాణాలు కంప్లైంట్ కాదు మరియు ఇప్పటికీ కొన్ని సమస్యలు ఉన్నాయి. ప్రతి బ్రౌజర్ నుండి IE6 ను దాచడానికి అనేక మార్గాలున్నాయి కానీ IE6, కానీ సులభమయిన (మరియు ఇతర సమస్యలకు కారణం కావచ్చు) నిబంధనలను ఉపయోగించడం. మీ పత్రం యొక్క తలపై మీ స్టైల్ తర్వాత క్రింది వాటిని ఉంచండి:
7. హైలైట్ చేయబడిన వ్యాఖ్యలో, కొన్ని శైలులతో మరొక శైలి షీట్ను జోడించండి, మంచిది చేయడానికి IE 6 ను పొందడానికి:
8. అలాగే IE 7 మరియు IE 8 లో పరీక్షించడానికి నిర్ధారించుకోండి. మీరు వాటిని మద్దతు కోసం వ్యాఖ్యలను సర్దుబాటు చేయాలి. అయితే, నేను పరీక్షించినప్పుడు అది పనిచేసింది.

OK - ఈ ఆమోదం WAY ఓవర్ కిల్ ఉంది. చాలా తక్కువ సైట్లు ఇక IE IE లేదా 8 మద్దతు అవసరం, చాలా తక్కువ IE6! అలాగే, ఈ విధానం పురాతనమైనది మరియు మీ కోసం అనవసరమైనది. నేను అన్ని మా బ్రౌజర్లు చాలా చక్కగా కలిసి ఆడాడు ముందు ఎంత కష్టం విషయాలు ఎంత ఉత్సుకత ఒక మోడల్ గా ఇక్కడ మరింత వదిలి!

ఒక చిన్న స్పేస్ ఓవర్ ఒక విస్తరించబడ్డ నేపథ్య చిత్రం ఫేకింగ్

నకిలీ విస్తరించిన నేపథ్య చిత్రంతో మీరు ఇదే పద్ధతిని ఉపయోగించవచ్చు DIV లేదా మీ వెబ్ పేజీలో మరొక అంశం. మీ పేజీ యొక్క ఇతర భాగాల కోసం మీరు ఖచ్చితమైన స్థానాలను ఉపయోగించడం లేదా విచిత్రమైన ఖాళీ సమస్యలను కలిగి ఉండడం వంటివి ఇది ఒక బిట్ తంత్రమైనది.

1. నేను నేపథ్యంలో ఉపయోగించాలనుకునే పేజీలో చిత్రాన్ని ఉంచండి.
2. శైలి షీట్లో, చిత్రం కోసం వెడల్పు మరియు ఎత్తును సెట్ చేయండి. గమనిక, మీరు వెడల్పు లేదా ఎత్తు కోసం శాతాన్ని ఉపయోగించవచ్చు, కానీ ఎత్తు కోసం పొడవు విలువలతో సర్దుబాటు చేయడం సులభం.
   1. img # bg {
   3. వెడల్పు: 20 ని;
   5. ఎత్తు: 30;
   7. }
3. మీ కంటెంట్ను ఒక div లో ఉంచండి ఐడి "కంటెంట్" పైన పేర్కొన్నది:మీ కంటెంట్ ఇక్కడ ఉంది
4. శైలి DIV నేపథ్య నేపథ్యం వలె ఒకే వెడల్పు మరియు ఎత్తు ఉండాలి:
   1. div # కంటెంట్ {
   3. వెడల్పు: 20 ని;
   5. ఎత్తు: 30;
   7. }
5. అప్పుడు ఇమేజ్కి ఇదే ఎత్తు వరకు కంటెంట్ని ఉంచండి.మీ చిత్రం 30em అయితే మీరు టాప్ శైలిని కలిగి ఉంటారు: -30em; కంటెంట్లో 1 యొక్క z- సూచిక ఉంచడానికి మర్చిపోవద్దు.
   1. # కంటెంట్ {
   3. స్థానం: సాపేక్ష;
   5. టాప్: -30;
   7. z- సూచిక: 1;
   9. వెడల్పు: 20 ని;
   11. ఎత్తు: 30;
   13. }
6. అప్పుడు పైన పేర్కొన్న విధంగా, IE 6 వినియోగదారులకు -1 యొక్క z- సూచికలో చేర్చండి:

మళ్ళీ, బ్రాడ్ బ్రౌజర్ను ఇప్పుడు అనుభవిస్తున్న నేపథ్య పరిమాణంతో, ఈ విధానం కూడా చాలా అనవసరమైనది మరియు పురాతన కాలం యొక్క ఉత్పత్తిగా అందించబడుతుంది. మీరు ఈ విధానాన్ని ఉపయోగించాలని కోరుకున్నా, మీరు వీలైనన్ని బ్రౌజర్లు వలె దీనిని పరీక్షించుకోండి. మరియు మీ కంటెంట్ పరిమాణం మారిస్తే, మీరు మీ కంటైనర్ మరియు నేపథ్య చిత్రం యొక్క పరిమాణాన్ని మార్చాలి, లేకపోతే, మీరు వింత ఫలితాలతో ముగుస్తుంది.