Kaip ištempti fono vaizdą, kad jis tilptų į tinklalapį

Suteikite savo svetainei vaizdinį susidomėjimą fonine grafika

Ką žinoti

• Pageidaujamas metodas: naudokite CSS3 ypatybę fono dydžio ir nustatykite viršelis .
• Alternatyvus metodas: naudokite CSS3 ypatybę fono dydžio nustatytas į 100 % ir fono padėtis nustatytas į centras.

Šiame straipsnyje paaiškinami du būdai, kaip ištempti fono vaizdą, kad jis tilptų į tinklalapį naudojant CSS3.

Šiuolaikinis būdas

Vaizdai yra svarbi patrauklumo dalis svetainių dizainas . Jie suteikia puslapiui vizualinio susidomėjimo ir padeda pasiekti norimą dizainą. Kai dirbate su fono vaizdais, galbūt norėsite, kad vaizdas tilptų į puslapį, nepaisant to platus įrenginių ir ekrano dydžių pasirinkimas .

Geriausias būdas ištempti vaizdą, kad jis atitiktų elemento foną, yra naudoti CSS3 turtas, už fono dydžio , ir nustatykite jį lygų viršelis .

|_+_|

Naudojant pavyzdį iš viršaus su fono dydžio nustatytas į 100 % vietoj to galite pamatyti, kad CSS atrodo beveik taip pat.

Rezultatas viso ekrano naršyklėje arba naršyklėje, kurios matmenys yra panašūs į vaizdą, yra beveik identiški. Tačiau su siauresniu ekranu pradeda ryškėti trūkumai.

Akivaizdu, kad jis nėra idealus, bet veiks kaip atsarginis variantas.

Pagal caniuse.com , ši nuosavybė veikia naudojant IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ ir visose pagrindinėse mobiliųjų įrenginių naršyklėse. Tai apima visas šiuo metu prieinamas šiuolaikines naršykles, o tai reiškia, kad turėtumėte naudoti šią nuosavybę nebijodami, kad ji neveiks kieno nors ekrane.

Taikant šiuos du metodus, jums neturėtų kilti jokių sunkumų palaikant beveik visas naršykles. Kaip fono dydis: viršelis Naršyklės įgauna dar didesnį pritarimą, net šis atsarginis variantas taps nereikalingas. Akivaizdu, kad CSS3 ir labiau reaguojanti projektavimo praktika supaprastino ir supaprastino vaizdų naudojimą kaip prisitaikantį foną HTML elementuose.