Rozťahovanie a škálovanie pozadia CSS
Existuje spôsob, ako v CSS dosiahnuť, aby sa pozadie roztiahlo alebo zmenšilo tak, aby vyplnilo svoj kontajner?
V súčasnosti nie. Bude k dispozícii v CSS 3, ale potrvá nejaký čas, kým bude implementovaná vo väčšine prehliadačov.
Jedným slovom: nie. Jediný spôsob, ako roztiahnuť obrázok, je pomocou značky <img>. Budete musieť byť kreatívni.
Toto platilo v roku 2008, keď bola napísaná táto odpoveď. Dnes moderné prehliadače podporujú funkciu background-size, ktorá tento problém rieši. Pozor na to, že IE8 ho nepodporuje.
Definujte "stretch and scale"...
Ak máte bitmapový formát, vo všeobecnosti nie je dobré (z grafického hľadiska) ho roztiahnuť a roztiahnuť. Na vytvorenie ilúzie rovnakého efektu môžete použiť opakovateľné vzory. Ak máte napríklad gradient, ktorý sa smerom k spodnej časti stránky zosvetľuje, potom by ste použili grafiku, ktorá'je široká jeden pixel a má rovnakú výšku ako váš kontajner (alebo radšej väčšiu, aby sa zohľadnilo škálovanie), a potom by ste ju rozdelili po stránke. Podobne, ak by gradient prechádzal naprieč stránkou, bol by vysoký jeden pixel a širší ako váš kontajner a opakoval by sa dole na stránke.
Aby ste vytvorili ilúziu, že sa obrázok roztiahne a vyplní kontajner, keď sa kontajner zväčší alebo zmenší, zvyčajne obrázok zväčšíte tak, aby bol väčší ako kontajner. Akékoľvek prekrývanie by sa nezobrazovalo mimo hraníc kontajnera.
Ak chcete dosiahnuť efekt, ktorý sa spolieha na niečo také ako krabica so zaoblenými okrajmi, potom by ste ľavú stranu krabice prilepili k ľavej strane kontajnera s dostatočným presahom, aby (v rámci možností) bez ohľadu na to, ako veľký je kontajner, nikdy nevyčerpal pozadie, a potom by ste navrstvili obrázok pravej strany krabice so zaoblenými okrajmi a umiestnili ho na pravú stranu kontajnera. Takto sa zdá, že keď sa kontajner zmenšuje alebo zväčšuje, efekt zakriveného boxu sa zmenšuje alebo zväčšuje spolu s ním - v skutočnosti sa tak nedeje, ale vytvára to ilúziu, že sa tak deje.
Ak chcete, aby sa obrázok skutočne zmenšoval a zväčšoval spolu s kontajnerom, museli by ste použiť nejaké triky s vrstvením, aby obrázok vyzeral, že funguje ako pozadie, a nejaký javascript na zmenu jeho veľkosti spolu s kontajnerom. V súčasnosti neexistuje žiadny spôsob, ako to urobiť pomocou CSS...
Ak používate vektorovú grafiku, obávam sa, že ste mimo mojej kompetencie.
