Lentelių diferencijavimas iš jų fonų padeda pabrėžti lentelės turinį, palyginti su visa kita tinklalapyje. Norėdami pridėti lentelės foną, turėsite pritaikyti kaskadų stiliaus lapą (CSS), palaikantį jūsų tinklalapį.
Pradžia
Geriausias būdas pridėti fono paveikslėlį prie stalo - naudoti CSS
fonas
nuosavybė. Norėdami pasiruošti rašyti CSS efektyviai ir išvengti netikėtų ekrano trikdžių, atidarykite fono paveikslėlį ir atkreipkite dėmesį į aukštį ir plotį. Tada įkelkite savo nuotrauką į savo prieglobos paslaugų teikėją. Patikrinkite vaizdo URL; viena iš labiausiai paplitusių priežasčių, kodėl vaizdai nerodomi, yra tai, kad URL yra klaidingas. Kai baigsite šį žingsnį, savo dokumento viršuje pastatykite CSS stiliaus bloką:
lentelė {background: url (" URL į paveikslėlį ") ne kartoti;} Nustatykite lentelės plotį ir aukštį, kad jis atitiktų vaizdo plotį ir aukštį. Jei jūsų lentelės turinys yra didesnis nei vaizdo aukštis ir plotis, fono vaizdas bus rodomas tik vieną kartą. Pirmiau pateiktose instrukcijose kiekviename puslapyje esančioje lentelėje bus nustatytas tas pats fono paveikslėlis. Jei norite įdėti foną tik į konkrečias lenteles, turite naudoti klasė
table.background {background: url (" URL į paveikslėlį ") ne kartoti;} Didesnės lentelės arba lentelės su daugiau turinio gali prireikti fono pakartoti, kad visa lentelė būtų užpildyta. Pakeiskite vertę savo CSS, kad vaizdas pakartotų y ašies, x ašies arba plytelių abu. fonas: url ("URL į vaizdą") pakartokite;
Numatyta, kad pakartotinė reikšmė bus plytelė, bet jūs taip pat galite nustatyti pakartotinę vertę pakartokite-x
arba pakartokite-y Bet kokios fono spalvos, nustatytos lentelės ląstelėse, viršys fono paveikslėlį lentelėje. Todėl būkite atsargūs, naudodami fono spalvas savo ląstelėse kartu su stalo fono vaizdais. Lentelės fonas nustatys jūsų stalus, išskyrus pagrindinį puslapį. Tačiau prieš pradėdami naudotis šia technika, pagalvokite dar kartą. Neutralaus vaizdo įterpimas gali būti blaškomas, bet sudėtingos nuotraukos, kurios turi būti mielos (pvz., Įdėkite kačiuko nuotrauką už stalo, nurodydamos, kad gyvūnai įvažiuoja), gali atrodyti neprofesionaliai ir gali turėti įtakos lentelių duomenų skaitomumui. Bet koks jūsų naudojamas vaizdas turi būti tinkamai licencijuotas; tiesiog todėl, kad galite rasti nuotrauką žiniatinklyje, nereiškia, kad galite ją pritaikyti savo naudojimui. Gerbti autorines teises!
ląstelė 1 ląstelė 2 ląstelė 1 ląstelė 2 …
Įdėkite fono tik vieną lentelę
klasė = "fonas" style = "width: 400px; height: 500px;> …
Leiskite "Table Background Image" pakartoti
plyteles horizontaliai arba vertikaliai, atitinkamai.
Ląstelių fono spalvos Blokuoti lentelės fono vaizdą
Apsvarstymai
