Attēla iestatīšana kā fona tabulai tīmekļa lapā

Tabulu nošķiršana no to fona palīdz uzsvērt tabulas saturu attiecībā pret visu pārējo tīmekļa lapā. Lai pievienotu tabulas fonu, jāveic izmaiņas kaskādes stila lapa atbalstot jūsu tīmekļa lapu.

Mūsdienu biroju ēkas, kas ir daļa no Griničas pussalas reģenerācijas, Londonas dienvidaustrumos, Lielbritānijā
Celtniecības fotogrāfija / Avalon / Getty Images

Darba sākšana

Labākais veids, kā pievienot tabulai fona attēlu, ir CSS izmantošana fons īpašums. Lai sagatavotos efektīvai CSS rakstīšanai un izvairītos no neparedzētiem displeja traucējumiem, atveriet fona attēlu un atzīmējiet augstumu un platumu. Pēc tam augšupielādējiet attēlu mitināšanas pakalpojumu sniedzējā. Pārbaudiet attēla URL; viens no visbiežāk sastopamajiem iemesliem, kāpēc attēli netiek rādīti, ir tāpēc, ka URL ir drukas kļūda.

Ievietojiet CSS stila bloku sava dokumenta galvā:


Uzrakstiet sava galda fona CSS un ievietojiet to stila blokā:

Novietojiet tabulu HTML:

šūna 1cell 2
šūna 1cell 2
Iestatiet tabulas platumu un augstumu, lai tie atbilstu attēla platumam un augstumam.

Iestatiet tabulas platumu un augstumu, lai tie atbilstu attēla platumam un augstumam.

instagram viewer

Ja jūsu tabulas saturs ir lielāks par attēla augstumu un platumu, fona attēls tiks parādīts tikai vienu reizi.

Ielieciet fonu tikai uz viena galda

Iepriekš minētie norādījumi iestatīs to pašu fona attēlu uz katras lapas tabulas. Lai fonu ievietotu tikai noteiktās tabulās, izmantojiet a klasē atribūts. Pievienojiet klasēfons jebkurai tabulai, kurai vēlaties iegūt šo fona attēlu. Iestatiet šo galdu platumu un augstumu.

Ļaujiet tabulas fona attēlam atkārtoties

Lielākām tabulām vai tabulām ar lielāku saturu var būt nepieciešams atkārtot fonu, lai visa tabula būtu aizpildīta. Mainiet CSS vērtību tā, lai attēls atkārtotos uz y ass, x ass vai tiktu salikts abos virzienos.

background: url ("URL uz attēlu") atkārtot; 

Pēc noklusējuma atkārtojuma vērtība tiks mainīta, taču atkārtojuma vērtību varat iestatīt arī uz.

atkārtot-x

vai.

atkārtojiet y

flīzēt attiecīgi horizontāli vai vertikāli.

Šūnu fona krāsas bloķē tabulas fona attēlu

Jebkuras fona krāsas iestatītās tabulas šūnas ignorē fona attēlu uz galda. Tāpēc esiet piesardzīgs, ja šūnās izmantojat fona krāsas kopā ar tabulas fona attēliem.

Apsvērumi

Visiem jūsu izmantotajiem attēliem jābūt atbilstoši licencētiem; Tas, ka fotoattēlu varat atrast tīmeklī, nenozīmē, ka varat to pielāgot savām vajadzībām. Cieniet autortiesības!

Galdu foni atšķir tabulas no pamatā esošās lapas. Tomēr, pirms lietojat šo tehniku, padomājiet divreiz. Neitrāla attēla ievietošana var nebūt traucējoša, bet sarežģīti attēli, kas domāti jaukiem (piemēram, ievietojot kaķēna attēls aiz galda norāda mājdzīvnieku adoptēšanu) var šķist neprofesionāla un var ietekmēt tabulas dati.