Skip to main content

Kuvan määrittäminen verkkosivun taulukon taustana

Word: Kuvan lisääminen ja asemointi (Huhtikuu 2025)

Word: Kuvan lisääminen ja asemointi (Huhtikuu 2025)
Anonim

Taulukoiden eriyttäminen taulukoista auttaa korostamaan taulukon sisältöä suhteessa kaikkiin muihin sivuihin. Jos haluat lisätä taulukon taustan, sinun on parannettava verkkosivustosi tukemaa CSS-tyylitiedostoa (CSS).

Päästä alkuun

Paras tapa lisätä taustakuva taulukkoon on käyttää CSS: ää

tausta

omaisuutta. Voit valmistautua kirjoittamaan CSS tehokkaasti ja välttämään odottamattomia näyttöongelmia avaamalla taustakuvan ja kirjoittamalla korkeus ja leveys. Lähetä sitten kuva hosting-palveluntarjoajaltasi. Testaa kuvan URL-osoite; yksi yleisimmistä syistä, miksi kuvat eivät näy, johtuu siitä, että URL-osoitteessa on typo. Kun olet suorittanut tämän vaiheen, laita CSS-tyylilohko asiakirjan otsikkoon:

  1. Kirjoita CSS-tausta taulukon taustalle ja laita se tyyliluokkaan:

    taulukko {tausta: url (" URL-osoite kuvaan ") no-repeat;}

    1. Aseta taulukko HTML-muotoon:

    2. solu 1

    3. solu 2

    4. solu 1

    5. solu 2

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

    … ​​

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

Laita taustaa vain yhdelle pöydälle

Yllä olevat ohjeet asettavat saman taustakuvan jokaiselle sivulle. Jos haluat asettaa taustan vain tiettyihin taulukoihin, sinun on käytettävä a

luokka

  1. Muuta CSS: täsi seuraavasti:

    table.background {tausta: url (" URL-osoite kuvaan ") no-repeat;}

  2. Lisää luokka tausta mihin tahansa taulukkoon, jolle haluat taustan kuvan. Aseta näiden taulukkojen leveys ja korkeus.

    class = "background" style = "width: 400px; korkeus: 500px;> …

Anna Taulukon taustakuvan toisto

Suuremmat taulukot tai useamman sisällön omaavat taulukot saattavat tarvita taustan toistamiseen niin, että koko taulukko on täytetty. Muuta arvoa CSS: ssä niin, että kuva toistuu y-akselilla, x-akselilla tai on kaakeloitu kummallekin.

tausta: url ("URL to image") toista;

Oletusarvoisesti toistuva arvo on laatoitettu, mutta voit myös asettaa toistuvuuden arvoon

toista-x

tai

toista-y

laatoittamiseksi vaakasuoraan tai pystysuoraan.

Solun taustavärit Estä taulukon taustakuva

Taulukon soluihin asetetut taustavärit ohittavat taustakuvan pöydässä. Joten ole varovainen, kun käytät taustavärejä soluissasi yhdessä taulun taustakuvien kanssa.

näkökohdat

Taulukon taustat määrittävät taulusi erillään alla olevasta sivusta. Mieti kuitenkin kahdesti ennen tämän tekniikan käyttöä. Neutraalin kuvan asettaminen ei saa häiritä, mutta monimutkaiset kuvat, jotka on tarkoitettu olevan söpöjä (esimerkiksi laittamalla kissanpentu kuvaan lemmikkieläimiä edustavan taulukon taakse) saattaa vaikuttaa ammattitaidolta ja voi vaikuttaa taulukkotietojen luettavuuteen.

Käyttämäsi kuvan täytyy olla oikeutettu; vain siksi, että voit löytää valokuvan verkossa, ei tarkoita sitä, että voit sovittaa sen omalle käyttötarkoitukselle. Kunnioita tekijänoikeuksia!