Prezrite si dnes populárne webové stránky a jedným z dizajnérskych riešení, ktoré určite uvidíte, sú veľké obrázky na pozadí, ktoré sa rozprestierajú na celej obrazovke. Jedna z výziev pri pridávaní týchto obrázkov pochádza z osvedčeného postupu, podľa ktorého musia webové stránky reagovať na rôzne veľkosti obrazoviek a zariadení - prístup známy ako responzívny webdizajn.
Jeden obrázok pre mnoho obrazoviek
Pretože sa rozloženie vášho webu mení a prispôsobuje rôznym veľkostiam obrazovky, musia zodpovedajúcim spôsobom meniť aj svoju veľkosť tieto obrázky na pozadí. V skutočnosti sú tieto „plynulé obrázky“ jedným z kľúčových prvkov responzívnych webov (spolu s plynulým rastrom a mediálnymi dopytmi). Tieto tri kúsky boli od začiatku základom responzívneho webdizajnu, ale aj keď vždy bolo pomerne ľahké pridať responzívny web vložené obrázky na web (vložené obrázky sú grafiky, ktoré sú kódované ako súčasť značiek HTML), to isté platí aj pre obrázky na pozadí (ktoré sú štylizované na stránku pomocou vlastností pozadia CSS) už dlho predstavuje významnú výzvu pre mnohých webových dizajnérov a klientske rozhranie vývojári. Našťastie to pridanie vlastnosti „veľkosť pozadia“ do CSS umožnilo.
V samostatnom článku sme sa venovali spôsobu používania Veľkosť pozadia vlastnosti CSS3 roztiahnuť obrázky tak, aby sa zmestili do okna, ale pre túto vlastnosť existuje ešte lepší a užitočnejší spôsob nasadenia. Použijeme na to nasledujúcu kombináciu vlastností a hodnôt:
veľkosť pozadia: obal;
Vlastnosť kľúčové slovo obal hovorí prehliadaču, aby upravil obrázok tak, aby sa zmestil do okna, bez ohľadu na to, aké veľké alebo malé sa dané okno dostane. Obrázok je zmenšený tak, aby pokrýval celú obrazovku, pôvodné proporcie a pomer strán sa však zachovajú nedotknuté, čo zabráni jeho skresleniu. Obrázok je umiestnený v okne čo najväčší, aby bola zakrytá celá plocha okna. To znamená, že na svojej stránke nebudete mať žiadne prázdne miesta ani žiadne skreslenie, ale aj to znamená, že časť obrázka môže byť orezaná v závislosti od pomeru strán obrazovky a obrazu v otázka. Napríklad okraje obrázka (horné, spodné, ľavé alebo pravé) môžu byť na obrázkoch orezané, v závislosti od toho, aké hodnoty použijete pre vlastnosť Pozícia na pozadí. Ak orientujete pozadie na „ľavú hornú časť“, akýkoľvek prebytok na obrázku bude vypadávať zo spodnej a pravej strany. Ak vycentrujete obrázok na pozadí, prebytok sa odlepí zo všetkých strán, ale pretože sa tento prebytok roztiahne, vplyv na ktorejkoľvek jednej strane bude menej účinný.
Ako používať „background-size: cover;“
Pri vytváraní obrázka na pozadí je dobré vytvoriť obrázok, ktorý je pomerne veľký. Zatiaľ čo prehliadače dokážu zmenšiť obrázok bez viditeľného vplyvu na vizuálnu kvalitu, v prípade, že sa prehľadávač zväčší, obrázok na veľkosť väčšiu, ako sú jeho pôvodné rozmery, zníži sa vizuálna kvalita, stane sa rozmazaná a pixelovaný. Nevýhodou je, že vaša stránka zaznamenáva vysoký výkon, keď na všetky obrazovky zobrazujete obrovské obrázky. Keď to urobíte, uistite sa, že správne pripravte tieto obrázky na rýchlosť sťahovania a doručenie na web. 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úboru pre rýchlosť sťahovania.
Jedným z bežných spôsobov použitia škálovania obrázkov na pozadí je, keď chcete, aby tento obrázok zabral celé pozadie stránky, či je táto stránka široká a pozerá sa na stolnom počítači alebo oveľa menšia a či sa posiela na vreckový mobilný telefón zariadenia.
Nahrajte svoj obrázok na svojho hostiteľa webu a pridajte ho do svojho CSS ako obrázok na pozadí:
background-image: url (fireworks-over-wdw.jpg);
background-repeat: no-repeat;
pozacia pozicia: stred stred;
príloha na pozadí: opravená;
Najskôr pridajte CSS s predponou:
-webkit-veľkosť pozadia: obal;
-moz-veľkosť pozadia: obal;
-o-veľkosť pozadia: obal;
Potom pridajte vlastnosť CSS:
veľkosť pozadia: obal;
Používanie rôznych obrázkov, ktoré vyhovujú rôznym zariadeniam
Aj keď je dôležitý responzívny dizajn pre stolný alebo prenosný počítač, je tu celá škála zariadení ktoré majú prístup na web, významne vzrástol a prichádza s väčšou škálou veľkostí obrazoviek že.
Ako už bolo spomenuté, načítanie veľmi veľkého responzívneho obrázka na pozadí napríklad do smartfónu nie je efektívnym dizajnom alebo požiadavkou na rýchlosť spojenia.
Zistite, ako môžete používať mediálne dotazy na poskytovanie obrázkov, ktoré budú vhodné pre zariadenia, na ktorých sa budú zobrazovať, a na ďalšie zlepšenie kompatibility vášho webu s mobilnými zariadeniami.