Kuvan asettaminen verkkosivun taulukon taustaksi

Taulukoiden erottaminen niiden taustoista auttaa korostamaan taulukon sisältöä suhteessa kaikkeen muuhun verkkosivulla. Jos haluat lisätä taulukon taustan, sinun on tehtävä muutoksia CSS-tyylitaulukko Web-sivusi tukeminen.

Modernit toimistorakennukset, jotka ovat osa Greenwichin niemimaan regenerointia, Kaakkois-Lontoossa, Iso-Britanniassa
Rakennusvalokuva / Avalon / Getty Images

Päästä alkuun

Paras tapa lisätä taustakuva taulukkoon on käyttää CSS: ää tausta omaisuus. Valmistaudu kirjoittamaan CSS tehokkaasti ja välttämään odottamattomat näytön häiriöt, avaamalla taustakuva ja tekemällä muistiin korkeus ja leveys. Lataa sitten kuva palveluntarjoajallesi. Testaa kuvan URL-osoite; yksi yleisimmistä syistä, miksi kuvia ei näytetä, johtuu siitä, että URL-osoitteessa on kirjoitusvirhe.

Lisää CSS-tyylilohko asiakirjan päähän:


Kirjoita CSS-taulukon taustaa varten ja laita se tyylilohkon sisään:

Sijoita taulukko HTML-koodiin:

solu 1osa 2
solu 1osa 2
Aseta taulukon leveys ja korkeus vastaamaan kuvan leveyttä ja korkeutta.

Aseta taulukon leveys ja korkeus vastaamaan kuvan leveyttä ja korkeutta.

Jos taulukon sisältö on suurempi kuin kuvan korkeus ja leveys, taustakuva näytetään vain kerran.

instagram viewer

Laita tausta vain yhdelle pöydälle

Yllä olevat ohjeet asettavat saman taustakuvan jokaiselle sivun taulukolle. Lisää tausta vain tietyille taulukoille käyttämällä a luokassa määritteen. Lisää luokassatausta mihin tahansa taulukkoon, jonka taustakuvan haluat saada. Aseta näiden pöytien leveys ja korkeus.

Anna taulukon taustakuvan toistaa

Suurempien tai enemmän sisältöä sisältävien taulukoiden taustan on ehkä oltava toistettavissa, jotta koko taulukko täytetään. Muuta arvoa CSS: ssä niin, että kuva toistuu y-akselilla, x-akselilla tai on ruudullinen molemmille.

tausta: url ("kuvan URL") toista; 

Oletusarvoisesti toistoarvo on kaakeloitu, mutta voit myös asettaa toiston arvoksi.

toista-x

tai.

toista-y

laatoittaa vaaka- tai pystysuunnassa.

Solun taustavärit estävät taulukon taustakuvan

Kaikki taustavärit taulukossa asetetut solut ohittavat taulukon taustakuvan. Joten ole varovainen, kun käytät solujen taustavärejä yhdessä taulukon taustakuvien kanssa.

Huomioita

Kaikilla käyttämilläsi kuvilla on oltava asianmukainen käyttöoikeus; Se, että löydät valokuvan verkosta, ei tarkoita sitä, että voit sovittaa sen omaan käyttöön. Kunnioita tekijänoikeuksia!

Taulukon taustat erottavat taulukot taustalla olevasta sivusta. Ajattele kuitenkin kahdesti ennen tämän tekniikan käyttämistä. Neutraalin kuvan lisääminen ei välttämättä häiritse, mutta monimutkaisia ​​kuvia, jotka on tarkoitettu söpöiksi (esimerkiksi lisäämällä a kuva kissanpennusta pöydän takana, joka osoittaa lemmikkieläinten adoptiot) saattaa tuntua epäammattimaiselta ja vaikuttaa levyn luettavuuteen taulukkotiedot.

instagram story viewer