CSS తో టెక్నిక్ అమలు
మీరు వెబ్ సైట్ రూపకల్పన చేస్తుంటే, ఒక వెబ్ పేజీలో స్థిర నేపథ్య చిత్రాన్ని లేదా వాటర్మార్క్ను ఎలా సృష్టించాలో నేర్చుకోవడంలో మీకు ఆసక్తి ఉండవచ్చు. ఇది చాలా సాధారణమైన ఆన్లైన్లో ప్రసిద్ది చెందిన సాధారణ రూపకల్పన చికిత్స. ఇది ట్రిక్స్ మీ వెబ్ డిజైన్ బ్యాగ్ లో కలిగి ఒక సులభ ప్రభావం.
మీరు ముందు చేయకపోతే లేదా అదృష్టంగా లేకుండా గతంలో ప్రయత్నించినట్లయితే, ప్రక్రియ బెదిరింపు అనిపించవచ్చు, కానీ ఇది నిజంగా చాలా కష్టం కాదు. ఈ క్లుప్త ట్యుటోరియల్ తో, మీరు CSS ను ఉపయోగించి నిమిషాల విషయంలో సాంకేతికతను నైపుణ్యానికి అవసరమైన సమాచారాన్ని పొందుతారు.
మొదలు అవుతున్న
నేపథ్య చిత్రాలు లేదా వాటర్మార్క్లు (ఇవి నిజంగా చాలా కాంతి నేపథ్య చిత్రాలను కలిగి ఉంటాయి) ముద్రించిన రూపకల్పనలో చరిత్రను కలిగి ఉన్నాయి. పత్రాలు వాటిని కాపీ చేయకుండా నిరోధించడానికి వాటర్మార్క్లను దీర్ఘకాలంలో చేర్చాయి. అదనంగా, అనేక ఫ్లైయర్లు మరియు బ్రోచర్లు ప్రింట్ ముక్క కోసం రూపకల్పనలో భాగంగా పెద్ద నేపథ్య చిత్రాలను ఉపయోగిస్తాయి. వెబ్ డిజైన్ కాలం ముద్రణ నుండి శైలులు మరియు నేపథ్య చిత్రాలు ఈ అరువు శైలుల్లో ఒకటి.
ఈ పెద్ద నేపథ్య చిత్రాలు క్రింది మూడు CSS శైలి లక్షణాలను ఉపయోగించి సృష్టించడం సులభం:
- నేపథ్య చిత్రం
- background-repeat
- background-అటాచ్మెంట్
- background- పరిమాణం
నేపధ్యం చిత్రం
మీ వాటర్మార్క్గా ఉపయోగించబడే చిత్రాన్ని నిర్వచించటానికి మీరు నేపథ్య చిత్రాన్ని ఉపయోగించుకుంటారు. ఈ శైలి మీ సైట్లో ఉన్న ఒక చిత్రాన్ని లోడ్ చేయటానికి ఒక ఫైల్ మార్గాన్ని ఉపయోగిస్తుంది, బహుశా "చిత్రాలు" అని పిలవబడే డైరెక్టరీలో.
నేపథ్య చిత్రం: url (/images/page-background.jpg);
ఇది చిత్రం ఒక సాధారణ చిత్రం కంటే తేలికైన లేదా మరింత పారదర్శక అని ముఖ్యం. ఇది "వాటర్మార్క్" రూపాన్ని సృష్టిస్తుంది, ఇందులో సెమీ-పారదర్శక చిత్రం టెక్స్ట్, గ్రాఫిక్స్ మరియు వెబ్ పేజీ యొక్క ఇతర ప్రధాన అంశాల వెనుక ఉంది. ఈ దశ లేకుండా, నేపథ్య చిత్రం మీ పేజీలో సమాచారాన్ని పోటీ చేస్తుంది మరియు చదవడం కష్టతరం చేస్తుంది.
Adobe Photoshop వంటి ఏదైనా సవరణ ప్రోగ్రామ్లో మీరు నేపథ్య చిత్రాన్ని సర్దుబాటు చేయవచ్చు.
Background-repeat
నేపథ్య రిపీట్ ఆస్తి తదుపరి వస్తుంది. మీరు మీ చిత్రం పెద్ద వాటర్మార్క్-శైలి గ్రాఫిక్ కావాలంటే, ఆ చిత్రం మాత్రమే ఒకసారి ప్రదర్శిస్తుంది.
background-repeat: no-repeat;
"నో-పునరావృతం" ఆస్తి లేకుండా, డిఫాల్ట్గా చిత్రం మళ్లీ పేజీలో మళ్ళీ మరియు పునరావృతం అవుతుంది. ఇది చాలా ఆధునిక వెబ్ పేజీ డిజైన్లలో అవాంఛనీయంగా ఉంటుంది, కాబట్టి ఈ శైలి మీ CSS లో అవసరమైనదిగా పరిగణించబడుతుంది.
నేపధ్యం-జోడింపు
నేపధ్యం-అటాచ్మెంట్ అనేక వెబ్ డిజైనర్లు గురించి మర్చిపోతే ఒక ఆస్తి. మీరు ఉపయోగించినప్పుడు "స్థిరమైన" లక్షణాన్ని ఉపయోగించినప్పుడు మీ నేపథ్య చిత్రం స్థిరంగా ఉంచుతుంది. ఇది పేజీలో స్థిరపడిన ఒక వాటర్మార్క్లో ఆ చిత్రాన్ని మారుస్తుంది.
ఈ ఆస్తి కోసం డిఫాల్ట్ విలువ "స్క్రోల్." మీరు నేపథ్య జోడింపు విలువను పేర్కొనకపోతే, మిగిలిన పేజీతో పాటు నేపథ్య స్క్రోల్ అవుతుంది.
background-attachment: స్థిర;
Background- పరిమాణం
నేపథ్య పరిమాణం ఒక కొత్త CSS లక్షణం. ఇది మీరు చూస్తున్న వీక్షణపోర్ట్ ఆధారంగా నేపథ్యం యొక్క పరిమాణంను సెట్ చేయడానికి అనుమతిస్తుంది. ఇది వివిధ పరికరాలపై వివిధ పరిమాణాలలో ప్రదర్శించే ప్రతిస్పందించే వెబ్సైట్లకు చాలా ఉపయోగకరంగా ఉంటుంది.
నేపథ్య పరిమాణం: కవర్;
ఈ ఆస్తి కోసం మీరు ఉపయోగించే రెండు ఉపయోగకర విలువలు:
- కవర్ - పూర్తి వెడల్పు లేదా పూర్తి ఎత్తు గాని నేపథ్యంలో ప్రమాణాలు ప్రదర్శించబడతాయి. దీని అర్థం చిత్రం యొక్క కొన్ని భాగాలు తెరపై కనిపించకపోవచ్చు కానీ మొత్తం ప్రాంతం కవర్ చేయబడుతుంది.
- కలిగి - చిత్రం వెడల్పు మరియు ఎత్తు రెండింటినీ శైలిలో చూపించాం. చిత్రం కత్తిరించబడదు, కానీ ఇబ్బంది ప్రాంతం యొక్క భాగాలను చిత్రం కవర్ కాదు అని ఇబ్బంది ఉంది.
మీ పేజీకు CSS ను జోడించడం
మీరు పైన ఉన్న లక్షణాలు మరియు వాటి విలువలను అర్థం చేసుకున్న తర్వాత, మీరు మీ వెబ్ సైట్కు ఈ శైలులను జోడించవచ్చు.
మీరు ఒకే పేజీ సైట్ చేస్తుంటే మీ వెబ్ పేజీ యొక్క HEAD కు క్రింది వాటిని జోడించండి. మీరు ఒక బహుళ-పేజీ సైట్ని నిర్మించి, బాహ్య షీట్ యొక్క అధికారాన్ని పొందాలనుకుంటే బాహ్య శైలి షీట్ యొక్క CSS శైలులకు దాన్ని జోడించండి.