Tu je návod, ako pridať citlivé dizajnové obrázky pomocou CSS
Pozrite sa na populárne webové stránky dnes a jeden dizajn liečby, ktoré si určite uvidíte, je veľký, obrazovka-spanning pozadia obrázky. Jednou z výziev pri pridávaní týchto obrázkov je najlepšia prax, ktorú musia webové stránky reagovať na rôzne veľkosti a zariadenia obrazovky - prístup známy ako reakcia na web dizajn .
Vzhľadom k tomu, rozloženie vášho webu zmeny a stupnice s rôznymi veľkosťami obrazovky, tak aj tieto obrázky na pozadí zmenšiť ich veľkosť zodpovedajúcim spôsobom.
Tieto "kvapalné obrazy" sú v skutočnosti jedným z kľúčových prvkov citlivých webových stránok (spolu s kvapalinou a mediálnymi otázkami). Tieto tri diely boli už od začiatku základom zodpovedajúceho dizajnu webových stránok, ale kým vždy bolo ľahké pridať do lokality citlivé inline obrázky (inline obrázky sú grafiky, ktoré sú kódované ako súčasť HTML značkovania), robiť to to isté ako obrázky na pozadí (ktoré sú nasnímané na stránku pomocou vlastností pozadia CSS) už dávno predstavovalo významnú výzvu pre mnohých web dizajnérov a vývojárov. Našťastie, pridanie vlastníctva "veľkosť pozadia" v CSS to umožnilo.
V samostatnom článku som sa zaoberal používaním veľkosti pozadia vlastností CSS3 na rozťahovanie obrázkov tak, aby sa zmestili do okna, ale je ešte lepší a užitočnejší spôsob nasadenia pre túto vlastnosť. Za týmto účelom použijeme túto kombináciu vlastností a hodnôt:
veľkosť pozadia: obal;
Vlastnosť kľúčového slova obalu informuje prehliadač, aby zmenil obraz tak, aby sa zmestil do okna, bez ohľadu na to, aké veľké alebo malé to okno dostane. Obraz je zmenšený tak, aby pokryl celú obrazovku, ale pôvodné proporcie a pomer strán sú zachované neporušené, čo zabraňuje skresleniu samotného obrazu.
Obraz sa umiestni do okna tak veľký, ako je len možné, aby bol pokrytý celý povrch okna. To znamená, že na vašej stránke nebudete mať žiadne prázdne miesta ani žiadne skreslenie obrazu, ale tiež to znamená, že časť snímky môže byť orezaná v závislosti od pomeru strán obrazu a obrazu. Okraje obrázka (horná, spodná, ľavá alebo pravá) môžu byť napríklad prerušené na obrázkoch v závislosti od toho, ktoré hodnoty použijete pre vlastnosť pozadia pozadia. Ak orientujete pozadie na "hore doľava", akýkoľvek prebytok obrázka sa vysunie zo spodnej a pravej strany. Ak vycentrujete pozadie na pozadí, prebytok vypadne zo všetkých strán, ale pretože tento prebytok je roztiahnutý, dopad na ktorúkoľvek stranu bude menej slúžiť.
Ako používať veľkosť pozadia: obal;
Pri vytváraní obrázka na pozadí je dobré vytvoriť obrázok, ktorý je pomerne veľký. Kým prehliadače môžu zmenšiť obraz bez viditeľného vplyvu na vizuálnu kvalitu, keď prehliadač zmenší obraz na veľkosť, ktorá je väčšia ako pôvodné rozmery, kvalita obrazu sa zhorší a bude rozmazaná. Nevýhodou je, že vaša stránka má výkonný úder, keď doručujete obrovské obrázky na všetky obrazovky.
Keď to urobíte, uistite sa, že ste správne pripravili tieto obrázky na rýchlosť sťahovania a doručenie na webe . Nakoniec musíte nájsť šťastné médium medzi dostatočne veľkou veľkosťou a kvalitou obrazu a primeranou veľkosťou súborov pre rýchlosť sťahovania.
Jeden z bežných spôsobov, ako používať obrázky na mierku na pozadí, je, keď chcete, aby tento obrázok zaujal úplné pozadie stránky, či je táto stránka široká a je zobrazená na stolnom počítači alebo oveľa menšia a je odosielaná do vreckového počítača zariadení.
Nahrajte svoj obrázok do vášho webhostingu a pridajte ho do CSS ako obrázok na pozadí:
obrázok-pozadie: url (fireworks-over-wdw.jpg);
opakovanie pozadia: opakovanie;
pozadie pozadia: stred centrum;
pripojenie na pozadí: opravené;
Najprv pridajte prefix CSS pre prehliadač:
-webkit-background-size: cover;
-moz-background-size: cover;
- veľkosť pozadia: obal;
Potom pridajte vlastnosť CSS:
veľkosť pozadia: obal;
Používanie rôznych obrázkov, ktoré vyhovujú rôznym zariadeniam
Zatiaľ čo dôležitý dizajn pre stolný alebo prenosný počítač je dôležitý, rozmanitosť zariadení, ktoré môžu pristupovať na web, výrazne vzrástla a k nemu prichádza väčšia škála veľkostí obrazovky.
Ako už bolo spomenuté, nakladanie veľmi veľkého odozvy na pozadí na smartphone, napríklad, nie je efektívnym dizajnom alebo dizajnom šetrným k šírke pásma.
Zistite, ako môžete použiť mediálne dopyty na zobrazovanie obrázkov, ktoré budú vhodné pre zariadenia, na ktorých sa budú zobrazovať, a ďalej zlepšovať kompatibilitu webových stránok s mobilnými zariadeniami.
Originálny článok Jennifer Krynin. Upravil Jeremy Girard 9/12/17