Skip to main content

వెబ్పేజీలో టేబుల్ కోసం నేపధ్యం గా ఒక చిత్రాన్ని అమర్చడం

Anonim

వారి నేపథ్యాల నుండి పట్టికలు వేరు వెబ్పేజీలో అన్నింటికీ సంబంధించి పట్టిక యొక్క కంటెంట్ను నొక్కి సహాయపడుతుంది. పట్టిక నేపథ్యాన్ని జోడించడానికి, మీరు మీ వెబ్పేజీకి మద్దతునిస్తున్న క్యాస్కేడింగ్ స్టైల్ షీట్ (CSS) ను సర్దుబాటు చేయాలి.

మొదలు అవుతున్న

ఒక పట్టికకు నేపథ్య చిత్రాన్ని జోడించడానికి ఉత్తమ మార్గం CSS ను ఉపయోగించడం

నేపథ్య

ఆస్తి. సమర్థవంతంగా CSS రాయడానికి మరియు ఊహించని ప్రదర్శన గ్లిచ్చెస్ నివారించేందుకు మీ సిద్ధం చేయడానికి, మీ నేపథ్య చిత్రాన్ని తెరిచి ఎత్తు మరియు వెడల్పు ఒక గమనిక చేయండి. మీ హోస్టింగ్ ప్రొవైడర్కు మీ చిత్రాన్ని అప్లోడ్ చేయండి. చిత్రం కోసం URL ను పరీక్షించండి; URL లో ఒక అక్షర దోషం ఉంది ఎందుకంటే చిత్రాలను ప్రదర్శించడానికి ఎందుకు అత్యంత సాధారణ కారణాలలో ఒకటి.మీరు ఆ దశను పూర్తి చేసిన తరువాత, మీ పత్రం యొక్క తలపై ఒక CSS స్టైల్ బ్లాక్ ఉంచండి:

  1. మీ పట్టిక నేపథ్యంలో మీ CSS ను వ్రాయండి మరియు శైలి బ్లాక్ లోపల ఉంచండి:

    పట్టిక {background: url (" చిత్రం URL ") పునరావృతం కాదు;}

    1. మీ పట్టికను HTML లో ఉంచండి:

    2. సెల్ 1

    3. సెల్ 2

    4. సెల్ 1

    5. సెల్ 2

  2. చిత్రం వెడల్పు మరియు ఎత్తుకు సరిపోలడానికి పట్టిక వెడల్పు మరియు ఎత్తును సెట్ చేయండి.

    … ​​

మీ పట్టిక విషయాలు చిత్రం ఎత్తు మరియు వెడల్పు కంటే పెద్దవి అయితే, నేపథ్య చిత్రం ఒక్కసారి మాత్రమే ప్రదర్శించబడుతుంది.

జస్ట్ వన్ టేబుల్పై నేపథ్యాన్ని ఉంచండి

పైన సూచనలు పేజీలోని ప్రతి పట్టికలో అదే నేపథ్య చిత్రాన్ని సెట్ చేస్తాయి. మీరు నిర్దిష్ట పట్టికలలో నేపథ్యాన్ని ఉంచాలనుకుంటే, మీరు ఒకదాన్ని ఉపయోగించాలి

తరగతి

  1. చదవడానికి మీ CSS మార్చండి:

    table.background {background: url (" చిత్రం URL ") పునరావృతం కాదు;}

  2. తరగతి జోడించండి నేపథ్య మీరు ఆ నేపథ్య చిత్రాన్ని కలిగి ఉన్న ఏ పట్టిక అయినా. ఆ పట్టికలు కోసం వెడల్పు మరియు ఎత్తు సెట్.

    తరగతి = "నేపధ్యం" శైలి = "వెడల్పు: 400px; ఎత్తు: 500px;> …

టేబుల్ నేపథ్య చిత్రం రిపీట్ లెట్

పెద్ద పట్టికలను లేదా మరిన్ని విషయాలతో ఉన్న పట్టికలు, మొత్తం పట్టిక నింపిన విధంగా నేపథ్య రిపీట్ కలిగి ఉండాలి. మీ CSS లో విలువ మార్చండి తద్వారా చిత్రం y- అక్షం, x- అక్షం, లేదా రెండూ ఇటుక మీద పునరావృతమవుతుంది.

నేపథ్య: url ("చిత్రానికి URL") పునరావృతం;

అప్రమేయంగా పునరావృత విలువ టైల్ చేయబడుతుంది, కానీ మీరు రిపీట్ విలువను కూడా అమర్చవచ్చు

పునః x

లేదా

పునః y

క్షితిజ సమాంతరంగా లేదా నిలువుగా టైల్ చేయడానికి.

సెల్ నేపధ్యం రంగులు టేబుల్ నేపథ్య చిత్రం బ్లాక్

పట్టిక కణాలపై సెట్ చేసిన ఏదైనా నేపథ్య రంగులను పట్టికలో నేపథ్య చిత్రాన్ని అధిగమించవచ్చు. మీ నేపథ్యాల నేపథ్య రంగులతో కలిపి నేపథ్య రంగులను ఉపయోగించడం జాగ్రత్తగా ఉండండి.

ప్రతిపాదనలు

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

మీరు ఉపయోగించే ఏదైనా చిత్రం సరిగా లైసెన్స్ పొందాలి; మీరు వెబ్లో ఒక ఫోటోను కనుగొనడం వలన మీ స్వంత ఉపయోగం కోసం మీరు దీన్ని సముచితంగా చెప్పవచ్చు. కాపీరైట్లను గౌరవించండి!