CSS ఉపయోగించి బాధ్యతాయుతంగా డిజైన్ చిత్రాలు జోడించడానికి ఇక్కడ ఎలా
ప్రముఖ వెబ్సైట్లు నేడు చూడండి మరియు మీరు ఖచ్చితంగా చూసే ఒక రూపకల్పన చికిత్స పెద్ద, స్క్రీన్-స్పిన్నర్ నేపథ్య చిత్రాలు. ప్రతిస్పందించే వెబ్ డిజైన్గా పిలువబడే విధానం - ఈ చిత్రాలను జోడించే సవాళ్ళలో ఒకటి వెబ్సైట్లు వేర్వేరు స్క్రీన్ పరిమాణాలు మరియు పరికరాలకు ప్రతిస్పందించాలి .
విభిన్న స్క్రీన్ పరిమాణాలతో మీ వెబ్సైట్ యొక్క లేఅవుట్ మార్పులు మరియు ప్రమాణాల నుండి, ఈ నేపథ్య చిత్రాలు వారి పరిమాణానికి అనుగుణంగా ఉండాలి.
నిజానికి, ఈ "ద్రవం చిత్రాలు" ప్రతిస్పందించే వెబ్సైట్ల (ద్రవం గ్రిడ్ మరియు మీడియా ప్రశ్నలతో పాటు) యొక్క కీలక భాగాలలో ఒకటి. ఆ మూడు ముక్కలు ప్రారంభం నుండి ప్రతిస్పందించే వెబ్ డిజైన్ యొక్క ప్రధానమైనవిగా ఉన్నాయి, కానీ ఇది ఎల్లప్పుడూ ఒక సైట్కు బాధ్యతాయుతంగా ఇన్లైన్ చిత్రాలను (ఇన్లైన్ చిత్రాలు HTML మార్కప్లో భాగంగా కోడ్ చేయబడిన గ్రాఫిక్స్) జోడించడానికి చాలా సులభం అయినప్పటికీ, నేపథ్యం చిత్రాలతో (CSS నేపథ్య లక్షణాలను ఉపయోగించి పేజీలోకి శైలిలో ఉండేవి) ఒకే సమయంలో అనేక వెబ్ డిజైనర్లు మరియు ఫ్రంట్ ఎండ్ డెవలపర్లకు ముఖ్యమైన సవాలును అందించింది. కృతజ్ఞతగా, CSS లో "background-size" ఆస్తి యొక్క అదనంగా ఇది సాధ్యం చేసింది.
ఒక ప్రత్యేక వ్యాసంలో, నేను ఒక విండోలో సరిపోయేలా చిత్రాలు తీయడానికి CSS3 ఆస్తి నేపథ్య-పరిమాణాన్ని ఎలా ఉపయోగించాలో కవర్ చేశాను, కానీ ఈ ఆస్తి కోసం మరింత మెరుగైన, మరింత ఉపయోగకరమైన మార్గం ఉంది. ఇది చేయుటకు, మనము కింది ఆస్తి మరియు విలువ కలయికను ఉపయోగిస్తాము:
నేపథ్య పరిమాణం: కవర్;
కవర్ కీ వర్డ్ ఆస్తి విండోకు సరిపోయే విధంగా, విండోను ఎంత పెద్దది లేదా చిన్నదిగా సంబంధం లేకుండా సరిపోయేలా చూస్తుంది. ఈ చిత్రం మొత్తం స్క్రీన్ని కవర్ చేయడానికి స్కేల్ చెయ్యబడింది, కాని అసలైన నిష్పత్తులు మరియు కారక నిష్పత్తి చెక్కుచెదరకుండా ఉంచబడతాయి, చిత్రాలను వక్రీకరించకుండా నిరోధించబడతాయి.
విండో మొత్తం విండో ఉపరితలంపై కప్పబడి వుండే వీలున్న విండోలో ఉంచుతారు. దీని అర్థం మీ పేజీలో ఏదైనా ఖాళీ స్థలం లేదా చిత్రంపై ఏ వక్రీకరణ ఉండదు, కానీ దీని అర్థం కొన్ని చిత్రం స్క్రీన్ యొక్క కారక నిష్పత్తిని మరియు సందేహాస్పద చిత్రంపై ఆధారపడి కత్తిరించబడవచ్చు. ఉదాహరణకు, చిత్రంలో అంచులు (పైన, దిగువ, ఎడమ, లేదా కుడి) చిత్రాలపై కత్తిరించబడవచ్చు, మీరు నేపథ్యం-స్థాన లక్షణానికి ఉపయోగించే విలువలను బట్టి ఉంటుంది. మీరు నేపథ్యాన్ని "ఎగువ ఎడమవైపు" ప్రక్కన ఉన్నట్లయితే, చిత్రంపై ఉన్న ఏమైనా దిగువ మరియు కుడి వైపులా ఉంటుంది. మీరు నేపథ్యం చిత్రం కేంద్రం ఉంటే, అదనపు అన్ని వైపులా ఆఫ్ వస్తాయి, కానీ ఆ అదనపు విస్తరించింది నుండి, ఏ ఒక వైపు ప్రభావం తక్కువ సర్వ్ ఉంటుంది.
నేపథ్య-పరిమాణాన్ని ఎలా ఉపయోగించాలి: కవర్;
మీ నేపథ్య చిత్రం సృష్టించినప్పుడు, అది చాలా పెద్దదిగా ఉండే ఒక చిత్రాన్ని రూపొందించడానికి మంచి ఆలోచన. బ్రౌజర్లు దృశ్య నాణ్యతపై గమనించదగ్గ ప్రభావం లేకుండా ఒక చిత్రం చిన్నదైనప్పటికీ, ఒక బ్రౌజర్ దాని యొక్క అసలు పరిమాణాల కన్నా పెద్దదిగా చిత్రీకరించినప్పుడు, దృశ్య నాణ్యత అధోకరణం చెందుతుంది, ఇది అస్పష్టంగా మారుతుంది మరియు పిక్సలేట్ అవుతుంది. దీనికి ప్రతికూలంగా, మీరు అన్ని స్క్రీన్లకు పెద్ద చిత్రాలను పంపిణీ చేసినప్పుడు మీ పేజీ పనితీరు హిట్ అవుతుంది.
మీరు దీన్ని చేసినప్పుడు, సరిగ్గా డౌన్లోడ్ వేగం మరియు వెబ్ డెలివరీ కోసం ఆ చిత్రాలను సిద్ధం చేయాలని నిర్ధారించుకోండి. చివరకు, మీరు పెద్ద తగినంత చిత్రం పరిమాణం మరియు నాణ్యత మరియు డౌన్లోడ్ వేగం కోసం ఒక సహేతుకమైన ఫైల్ పరిమాణం మధ్య సంతోషంగా మాధ్యమం కనుగొనేందుకు అవసరం.
స్కేలింగ్ నేపథ్యం చిత్రాలను ఉపయోగించడానికి సాధారణ మార్గాల్లో ఒకటి, ఆ చిత్రం విస్తృతమైన పేజీని, డెస్క్టాప్ కంప్యూటర్లో వీక్షించడం లేదా చాలా చిన్నదిగా మరియు మొబైల్ మరియు మొబైల్ ఫోన్లకు పంపబడుతుంది పరికరాల.
మీ వెబ్ హోస్ట్కు మీ చిత్రాన్ని అప్లోడ్ చేయండి మరియు మీ CSS కి నేపథ్య చిత్రంగా జోడించండి:
background-image: url (బాణాసంచా-over-wdw.jpg);
background-repeat: no-repeat;
నేపథ్య స్థానం: సెంటర్ సెంటర్;
background-attachment: స్థిర;
మొదట బ్రౌజర్ ముందు CSS ను జోడించు:
-వెబ్కిట్-నేపథ్య-పరిమాణం: కవర్;
-moz-background-size: cover;
-o-background-size: cover;
అప్పుడు CSS ఆస్తి జోడించండి:
నేపథ్య పరిమాణం: కవర్;
వేర్వేరు ఇమేజ్ లను ఉపయోగించి సూట్ వివిధ పరికరాలు
డెస్క్టాప్ లేదా ల్యాప్టాప్ అనుభవం కోసం ప్రతిస్పందించే డిజైన్ ముఖ్యం అయినప్పటికీ, వెబ్ను ప్రాప్యత చేసే వివిధ రకాల పరికరాలు గణనీయంగా పెరిగాయి మరియు ఎక్కువ పరిమాణ స్క్రీన్ పరిమాణాలు వస్తుంది.
గతంలో చెప్పినట్లుగా, స్మార్ట్ఫోన్లో చాలా పెద్ద ప్రతిస్పందించే నేపథ్య చిత్రాన్ని లోడ్ చేయడం, ఉదాహరణకు, సమర్థవంతమైన లేదా బ్యాండ్విడ్త్-జ్ఞాన రూపకల్పన కాదు.
మీరు మీడియా ప్రశ్నలను ఎలా ఉపయోగించాలో తెలుసుకోవడానికి పరికరాలకు అనుగుణంగా చిత్రాలను ఉపయోగించుకోవచ్చని తెలుసుకోండి మరియు మొబైల్ పరికరాలతో మీ వెబ్సైట్ అనుకూలతను మెరుగుపరచండి.
జెన్నీఫెర్ క్రిన్ని రచన అసలు వ్యాసం. జెరెమీ గిరార్డ్ 9/12/17 చే ఎడిట్ చేయబడింది