GIFని సెట్ చేస్తోంది' గ్రాఫిక్స్ ఇంటర్‌చేంజ్ ఫార్మాట్ ” నేపథ్య చిత్రంగా డిజైన్‌కు దృశ్యమానంగా ఆకట్టుకునే మూలకాన్ని జోడిస్తుంది. GIF డెవలపర్‌లను సమాచారాన్ని తెలియజేయడానికి లేదా బ్రాండ్ యొక్క దృశ్యమాన గుర్తింపును రూపొందించడంలో సహాయపడే ఉత్పత్తి లేదా సేవను హైలైట్ చేయడానికి అనుమతిస్తుంది. అయితే, డెవలపర్‌లు తప్పనిసరిగా GIFల వినియోగం వెబ్‌పేజీని అధిగమించకుండా లేదా ప్రధాన కంటెంట్ నుండి వినియోగదారుని దృష్టి మరల్చకుండా చూసుకోవాలి.
ఈ కథనం వెబ్‌పేజీలో GIFని నేపథ్య చిత్రంగా సెట్ చేసే విధానాన్ని ప్రదర్శిస్తుంది.
వెబ్‌పేజీలో GIFని బ్యాక్‌గ్రౌండ్ ఇమేజ్‌గా ఎలా సెట్ చేయాలి?
GIFని బ్యాక్‌గ్రౌండ్ ఇమేజ్‌గా సెట్ చేయడం విజువల్ ఎలిమెంట్‌లను జోడించడం ద్వారా ఆకర్షించే ఎలిమెంట్‌లను రూపొందించడంలో సహాయపడుతుంది.
GIFలు ముఖ్యంగా ఉల్లాసభరితమైన లేదా విచిత్రమైన భావాన్ని తెలియజేయాలనుకునే వెబ్‌సైట్‌లలో లేదా నిర్దిష్ట ఉత్పత్తి లేదా ఫీచర్‌ను హైలైట్ చేయాలనుకునే పేజీలలో ఉపయోగకరంగా ఉంటాయి. దీన్ని సెట్ చేయడానికి, నేపథ్య చిత్రంగా క్రింది ఉదాహరణలను సందర్శించండి:
ఉదాహరణ 1: GIFని స్థిర నేపథ్యంగా సెట్ చేయడం
వెబ్‌పేజీ యొక్క కంటెంట్‌ను రూపొందించడంలో సహాయపడే HTML మూలకాలు '' లోపల ఉంచబడినందున <బాడీ> ” ట్యాగ్. అందుకే, 'ని ఎంచుకోవడం శరీరం ” మూలకం మరియు దానిపై CSS లక్షణాలను వర్తింపజేయడం. ఇది ' యొక్క అన్ని కలిగి ఉన్న HTML మూలకాలను ప్రభావితం చేస్తుంది <బాడీ> ” ట్యాగ్.
ఉదాహరణకు, ' 'మరియు' ” ట్యాగ్‌లు వెబ్‌పేజీ యొక్క కంటెంట్‌గా ఉపయోగించబడతాయి. దిగువ కోడ్ స్నిప్పెట్‌ని చూడండి:
< శరీరం >
< h1 > GIFని సెట్ చేస్తోంది వంటి పేజీలో నేపథ్య చిత్రం h1 >
< p > ఈ GIF జోడించబడింది వంటి ఉపయోగించి మొత్తం పేజీలో నేపథ్య చిత్రం 'నేపథ్య చిత్రం' ఆస్తి. ఈ ఆర్టికల్ Linuxhint ద్వారా అందించబడింది. p >
శరీరం >
ఇప్పుడు, 'శరీరం' HTML మూలకాన్ని 'లోపల ఎంచుకోండి <శైలి> 'ట్యాగ్ లేదా విడిగా' CSS ” వెబ్‌పేజీలో స్టైలింగ్‌ని వర్తింపజేయడానికి ఫైల్:
నేపథ్య చిత్రం: url ( 'sea.gif' ) ;
నేపథ్యం-పునరావృతం: నో-రిపీట్;
నేపథ్య పరిమాణం: కవర్;
పాడింగ్: 50px;
ఫాంట్ పరిమాణం: x-పెద్ద;
రంగు: తెలుపు;
}
పై కోడ్ బ్లాక్‌లో:
-
- మొదట, ' url() 'పద్ధతి ఉపయోగించబడుతుంది, ఇది ' యొక్క మార్గాన్ని నిల్వ చేస్తుంది GIF ” ఫైల్. మరియు ఈ పద్ధతి CSSకి విలువగా పంపబడుతుంది ' నేపథ్య చిత్రం ”ఆస్తి.
- తరువాత, సెట్ చేయి ' పునరావృతం కాదు 'CSSకి విలువగా' నేపథ్య-పునరావృతం ”GIF ఫైల్ పునరావృతం కోసం ఆస్తి.
- అప్పుడు, ' విలువను సెట్ చేయండి కవర్ 'CSSకి' నేపథ్య పరిమాణం 'అందుబాటులో ఉన్న అన్ని స్థలాన్ని కవర్ చేయడానికి ఆస్తి
- ఆ తర్వాత, '' విలువను అందించండి 50px 'మరియు' x-పెద్ద 'CSSకి' పాడింగ్ 'మరియు' ఫాంట్ పరిమాణం ” లక్షణాలు, వరుసగా. ఇది టెక్స్ట్ చుట్టూ అంతరాన్ని జోడిస్తుంది మరియు ఫాంట్ పరిమాణాన్ని పెంచుతుంది.
సంకలనం తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
వెబ్‌పేజీలో నేపథ్యంగా gif జోడించబడిందని పై అవుట్‌పుట్ చూపిస్తుంది.
ఉదాహరణ 2: GIFని స్క్రోల్ చేయదగిన నేపథ్యంగా సెట్ చేయడం
ప్రారంభంలో, ఇలాంటి వెబ్‌పేజీ కంటెంట్‌ను రూపొందించడానికి HTML నిర్మాణాన్ని సృష్టించండి:
< div తరగతి = 'కొంటాయి' >< h1 > GIFని సెట్ చేస్తోంది వంటి పేజీలో నేపథ్య చిత్రం h1 >
< p > ఈ GIF జోడించబడింది వంటి ఉపయోగించి మొత్తం పేజీలో నేపథ్య చిత్రం 'నేపథ్య చిత్రం' ఆస్తి. ఈ ఆర్టికల్ Linuxhint ద్వారా అందించబడింది. p >
div >
< div >
< h3 శైలి = 'రంగు:తెలుపు;' > బయట వ్రాసిన కంటెంట్ 'డివి' మూలకం h3 >
div >
పై కోడ్‌లో:
-
- మొదట, తల్లిదండ్రులు ' 'ట్యాగ్' యొక్క తరగతితో ఉపయోగించబడుతుంది కలిగి ”.
- తరువాత, 'ని ఉపయోగించండి h1 'మరియు' p ” HTML మూలకాలు మరియు వాటికి నకిలీ కంటెంట్‌ను అందించండి.
- ఆ తర్వాత, మరొకదాన్ని సృష్టించండి '
'మరియు' ఉపయోగించండి దానికి డమ్మీ డేటా అందించడం ద్వారా ” ట్యాగ్ చేయండి.ఇప్పుడు, క్రింది CSS లక్షణాలను చొప్పించడం ద్వారా వెబ్ పేజీలో GIFని నేపథ్యంగా జోడించండి:
.కొంటాయి {
నేపథ్య చిత్రం: url ( sea.gif ');
నేపథ్యం-పునరావృతం: నో-రిపీట్;
నేపథ్య పరిమాణం: కవర్;
ఎత్తు: 100vh;
ప్రదర్శన: ఫ్లెక్స్;
సమలేఖనం-అంశాలు: కేంద్రం;
జస్టిఫై-కంటెంట్: సెంటర్;
ఫ్లెక్స్-దిశ: కాలమ్;
రంగు: తెలుపు;
ఫాంట్ పరిమాణం: పెద్ద;
టెక్స్ట్-అలైన్: సెంటర్;
పాడింగ్: 2rem;
}
పైన ఉపయోగించిన కోడ్ బ్లాక్ యొక్క వివరణ:-
- మొదట, 'ని సెట్ చేయండి చిత్రం-మార్గం ',' పునరావృతం కాదు t' మరియు ' కవర్ 'CSSకి విలువగా' నేపథ్య చిత్రం ',' నేపథ్య-పునరావృతం 'మరియు' నేపథ్య పరిమాణం ” లక్షణాలు, వరుసగా.
- తరువాత, ' విలువను సెట్ చేయండి 100vh 'మరియు' ఫ్లెక్స్ 'CSSకి' ఎత్తు 'మరియు' ప్రదర్శన 'గుణాలు.
- ఆ తరువాత, CSS ను ఉపయోగించండి ' రంగు ',' ఫాంట్ పరిమాణం ',' టెక్స్ట్-అలైన్ 'మరియు' పాడింగ్ ” కంటెంట్‌కు స్టైలింగ్‌ని వర్తింపజేయడానికి లక్షణాలు.
సంకలన ప్రక్రియ ముగిసిన తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
అవుట్‌పుట్ ప్రదర్శిస్తుంది “ GIF ” మొత్తం పేజీలో నేపథ్య చిత్రంగా చొప్పించబడింది.ముగింపు
వెబ్‌పేజీలో GIFని నేపథ్య చిత్రంగా సెట్ చేయడానికి, CSS ' నేపథ్య చిత్రం 'ఆస్తి HTMLలో ఉపయోగించబడుతుంది' శరీరం ' మూలకం. 'బాడీ' ఎలిమెంట్‌కు వర్తించే CSS ప్రాపర్టీ అన్ని కలిగి ఉన్న ఎలిమెంట్‌లకు స్వయంచాలకంగా వర్తించబడుతుంది. సెట్ చేయడం ద్వారా ' 100vh ” ఎత్తు ఆస్తికి విలువగా, స్క్రోలింగ్ ప్రభావం కూడా ప్రారంభించబడుతుంది. ఇది స్క్రోల్‌తో పాటు బ్యాక్‌గ్రౌండ్ gifని తరలించడానికి అనుమతిస్తుంది. వెబ్‌పేజీలో GIFని నేపథ్య చిత్రంగా ఎలా సెట్ చేయాలో ఈ కథనం ప్రదర్శించింది.
- మొదట, తల్లిదండ్రులు '