ఈ అధ్యయన గైడ్ CSSతో నేపథ్య చిత్రాలను ఎలా ఉపయోగించాలో ప్రదర్శిస్తుంది. కాబట్టి, ప్రారంభిద్దాం!
CSSతో బహుళ నేపథ్య చిత్రాలను ఎలా ఉపయోగించాలి?
CSS' నేపథ్య ” ప్రాపర్టీ అనేది బ్యాక్‌గ్రౌండ్, బ్యాక్‌గ్రౌండ్-అటాచ్‌మెంట్, క్లిప్, ఇమేజ్, రిపీట్, ఆరిజిన్, సైజ్ మరియు పొజిషన్ ప్రాపర్టీలను కలిగి ఉండే షార్ట్‌హ్యాండ్ ప్రాపర్టీ. బహుళ చిత్రాల URLలను పేర్కొనడానికి నేపథ్య ప్రాపర్టీని ఉపయోగించవచ్చు. ఆ చిత్రాలు ఆ తర్వాత స్థానం మరియు తదనుగుణంగా సెట్ చేయబడతాయి.
ఒక ఉదాహరణ తీసుకుందాం, దీనిలో ఒక DIV మూలకం వెబ్ పేజీ లోగోగా ఒక చిత్రాన్ని మాత్రమే కలిగి ఉంటుంది, రెండవది మూడు చిత్రాలను కలిగి ఉంటుంది.
ఉదాహరణ: CSSతో బహుళ నేపథ్య చిత్రాలను జోడించడం
HTMLలో, లోగో కోసం div ఎలిమెంట్‌ని జోడించి, తరగతి పేరును పేర్కొనండి. ఉదాహరణకు, మేము దీనికి పేరు పెట్టాము ' లోగో ”. రెండవ DIV బహుళ చిత్రాలను ఉపయోగిస్తుంది, కాబట్టి మేము దానికి ' బహుళ చిత్రాలు ”. అయితే, మీరు మీ ప్రాధాన్యతల ప్రకారం తరగతి పేరును పేర్కొనవచ్చు.
HTML
< div తరగతి = 'లోగో' >< / div >< div తరగతి = 'బహుళ చిత్రాలు' >< / div >
తదుపరి విభాగంలో, మేము CSS నేపథ్య ప్రాపర్టీని ఉపయోగించి చిత్రాలను సర్దుబాటు చేస్తాము.
శైలి 'లోగో' డివి
.లోగో {వెడల్పు : 100% ;
ఎత్తు : 50px ;
పాడింగ్ : 5px ;
మార్జిన్ : 5px ;
నేపథ్య పరిమాణం : 100px ;
నేపథ్య-పునరావృతం : పునరావృతం కాదు ;
నేపథ్య చిత్రం : url ( images/linux-logo.png ) ;
}
తరగతితో div మూలకం ' లోగో ” కింది లక్షణాలతో వర్తించబడుతుంది:
- ' వెడల్పు మూలకం యొక్క వెడల్పును సెట్ చేయడానికి ఆస్తి ఉపయోగించబడుతుంది 100% ”.
- ' ఎత్తు మూలకం యొక్క ఎత్తును సెట్ చేయడానికి ఆస్తి ఉపయోగించబడుతుంది 50px ”.
- ' పాడింగ్ 'ఆస్తి' సెట్ చేయడానికి ఉపయోగించబడుతుంది 5px మూలకం యొక్క పేర్కొన్న కంటెంట్ చుట్టూ ఖాళీ.
- ' మార్జిన్ 'ఆస్తి సెట్ చేయడానికి ఉపయోగించబడుతుంది' 5px మూలకం చుట్టూ ఖాళీ.
- ' నేపథ్య పరిమాణం 'ప్రాపర్టీ మూలకం యొక్క నేపథ్య చిత్ర పరిమాణాన్ని 'గా సెట్ చేస్తుంది 100px ”.
- ' నేపథ్య-పునరావృతం 'విలువతో' పునరావృతం కాదు ” నేపథ్యాన్ని ఒక్కసారి మాత్రమే ప్రదర్శిస్తుంది.
- ' నేపథ్య చిత్రం ” చిత్రం యొక్క URLని పేర్కొనడానికి ఆస్తి ఉపయోగించబడుతుంది.
శైలి 'బహుళ-చిత్రాలు' div
.బహుళ చిత్రాలు {వెడల్పు : 90% ;
ఎత్తు : 45vh ;
మార్జిన్ : 1px దానంతట అదే ;
పాడింగ్ : 20px ;
నేపథ్య పరిమాణం : 150px ;
నేపథ్య రంగు : rgb ( 157 , 154 , 151 ) ;
నేపథ్య చిత్రం : url ( images/office.png ) , url ( images/html.png ) , url ( images/laptop.png ) ;
నేపథ్య-పునరావృతం : పునరావృతం కాదు , పునరావృతం కాదు , పునరావృతం కాదు ;
నేపథ్య-స్థానం : వదిలేశారు , కేంద్రం , కుడి ;
}
ఇప్పుడు, ఇతర కంటైనర్‌ను ఈ క్రింది విధంగా స్టైల్ చేయండి:
- ' నేపథ్య రంగు ”ఆస్తి మూలకం యొక్క నేపథ్యం యొక్క రంగును నిర్దేశిస్తుంది.
- ' నేపథ్య చిత్రం ”ప్రాపర్టీ బహుళ చిత్ర URLలను నిర్దేశిస్తుంది.
- ' నేపథ్య-పునరావృతం ” ప్రాపర్టీ బ్యాక్‌గ్రౌండ్-ఇమేజ్ ప్రాపర్టీలో పేర్కొన్న ఇమేజ్‌ల సీక్వెన్స్‌లో ఇమేజ్‌ల విలువలను సెట్ చేస్తుంది. రెండు చిత్రాలు నాన్-రిపీట్‌గా సెట్ చేయబడ్డాయి అంటే అవి బ్రౌజర్‌లో ఒక్కసారి మాత్రమే చూపబడతాయి.
- ' నేపథ్య-స్థానం ” బ్యాక్‌గ్రౌండ్-ఇమేజ్ ప్రాపర్టీ ద్వారా పేర్కొన్న ఇమేజ్‌ల సీక్వెన్స్‌లో ఇమేజ్ పొజిషన్‌ను సర్దుబాటు చేస్తుంది. మొదటి చిత్రం ఎడమ వైపున సెట్ చేయబడుతుంది, రెండవది మధ్యలో ఉంటుంది మరియు మూడవది కుడి వైపున ఉంచబడుతుంది.
పైన అందించిన కోడ్‌ని అందించడం ద్వారా, బ్రౌజర్‌లో ఫలితం ఇలా కనిపిస్తుంది:
ఈ విధంగా, మేము CSSతో బహుళ చిత్రాల స్థానాన్ని సర్దుబాటు చేయవచ్చు.
ముగింపు
అప్లికేషన్‌ను వినోదాత్మకంగా మరియు ఇంటరాక్టివ్‌గా చేయడానికి, డెవలపర్‌లు విభిన్న చిత్రాలు మరియు రంగులను ఉపయోగిస్తారు. మేము బ్యాక్‌గ్రౌండ్-పొజిషన్, బ్యాక్‌గ్రౌండ్-రిపీట్, బ్యాక్‌గ్రౌండ్-సైజ్ మరియు మరిన్ని వంటి CSS నేపథ్య లక్షణాలతో బహుళ చిత్రాలను సెట్ చేయవచ్చు. ఈ మాన్యువల్ CSS ఉదాహరణలతో బహుళ నేపథ్య చిత్రాల వినియోగాన్ని ప్రదర్శించింది.