Lentelių atskyrimas nuo jų fono padeda pabrėžti lentelės turinį, palyginti su visa kita tinklalapio dalimi. Norėdami pridėti lentelės foną, turėsite atlikti pakeitimus kaskadinis stiliaus lapas palaikydami savo tinklalapį.
Pradžia
Geriausias būdas pridėti fono vaizdą į lentelę yra CSS naudojimas fonas nuosavybė. Norėdami pasiruošti efektyviai rašyti CSS ir išvengti netikėtų ekrano nesklandumų, atidarykite fono paveikslėlį ir pažymėkite aukštį ir plotį. Tada įkelkite savo atvaizdą į savo prieglobos paslaugų teikėją. Išbandykite vaizdo URL; viena iš dažniausiai pasitaikančių priežasčių, kodėl vaizdai nerodomi, yra tai, kad URL yra rašybos klaida.
Į dokumento galvutę įterpkite CSS stiliaus bloką:
Parašykite savo stalo fono CSS ir įdėkite jį į stiliaus bloką:
Įdėkite lentelę į HTML:
1 langelis 2 langelis
1 langelis 2 langelis
Nustatykite lentelės plotį ir aukštį, kad atitiktų vaizdo plotį ir aukštį.
Nustatykite lentelės plotį ir aukštį, kad atitiktų vaizdo plotį ir aukštį.
Jei lentelės turinys yra didesnis nei vaizdo aukštis ir plotis, fono paveikslėlis bus rodomas tik vieną kartą.
Uždėkite foną tik vienoje lentelėje
Pirmiau pateiktose instrukcijose bus nustatytas tas pats fono vaizdas kiekvienoje puslapio lentelėje. Norėdami įdėti foną tik į konkrečias lenteles, naudokite a klasė atributas. Pridėti klasėfonas prie bet kurios lentelės, kurioje norite turėti tą fono paveikslėlį. Nustatykite tų lentelių plotį ir aukštį.
Leiskite pakartoti lentelės fono vaizdą
Didesnėse lentelėse arba lentelėse, kuriose yra daugiau turinio, gali tekti pakartoti foną, kad visa lentelė būtų užpildyta. Pakeiskite CSS vertę taip, kad vaizdas pasikartotų y ašyje, x ašyje arba būtų išdėstytas abiem.
background: URL („URL to image“) pakartoti;
Pagal numatytuosius nustatymus pakartojimo vertė bus išdėstyta išklotine, tačiau pakartojimo vertę taip pat galite nustatyti į.
pakartoti-x
arba.
pakartokite y
plyteles atitinkamai horizontaliai arba vertikaliai.
Langelio fono spalvos blokuoja lentelės fono vaizdą
Bet kokios fono spalvos nustatyti lentelės langeliai nepaiso lentelės fono paveikslėlio. Taigi būkite atsargūs, kai langelių fono spalvas naudojate kartu su lentelės fono vaizdais.
Svarstymai
Bet koks jūsų naudojamas vaizdas turi būti tinkamai licencijuotas; Tai, kad nuotrauką galite rasti internete, dar nereiškia, kad galite pritaikyti ją savo reikmėms. Gerbkite autorių teises!
Lentelių fonai išskiria lenteles nuo pagrindinio puslapio. Tačiau prieš naudodamiesi šia technika gerai pagalvokite. Neutralaus vaizdo įterpimas gali neblaškyti dėmesio, tačiau sudėtingi paveikslėliai, skirti mielai (pavyzdžiui, įterpiant kačiuko paveikslėlis už stalo, nurodantis augintinių įvaikinimą) gali pasirodyti neprofesionalus ir gali pakenkti jo skaitomumui lentelių duomenys.