Ahoj. Dnes považujeme za to, ako môžete natiahnuť pozadie CSS pomocou prostriedkov (bez rušenia iných prostriedkov, ako je Javascript a iné ako oni).
Stretch Pozadie CSS Tools sa stal možným s výskytom CSS3, konkrétne s použitím vlastnosti veľkosti pozadia. Treba povedať, že táto vlastnosť funguje oveľa lepšie ako podobné riešenia pre Javascript (ktoré boli použité pred vzhľadom na veľkosť pozadia), rovnako rýchlejšie a primerane reaguje na zmenu veľkosti prehliadača, rýchlejšie vyhladzuje natiahnutý obraz a ako oni Miloval hovoriť začiatkom roka 2000 x, "bude fungovať aj s discovateľom Javascript".
Riešenie: Ako natiahnuť pozadie CSS Tools
Vlastnosti na pozadí môžu mať niekoľko hodnôt.
1) Môže to byť jedna zo smerníc: kryt alebo obsahovať.
Veľkosť: obsahujú; / * Stupuje obraz pri udržiavaní pomerov tak, aby sa la carte celej zmestí do bloku. * / Veľkosť pozadia: kryt; / * Stupuje obraz pri zachovaní pomerov, takže jeho šírka alebo výška je rovná šírke alebo výške jednotky. * /
2) Môžu to byť percentá (100% alebo 94% šírky kontajnera). V tomto prípade môžete použiť 1 hodnotovú hodnotu v percentách a 2. Ak sú hodnoty 2, potom sa zmenší nadmorská výška a šírka obrazu a každá z hodnôt sa upraví v pomere k špecifikovaným percentám v parametroch).
Veľkosť pozadia: 100%; / * Ekvivalentná smernica Kryt * / Veľkosť pozadia: 100% 50%; / * Šírka bude 100% šírka bloku, ale výška je len 50%, obraz s najväčšou pravdepodobnosťou bude deformovaný * /
3) priamo číselná hodnota (v Pischel, centimetroch, em atď.). Parametre môžu byť tiež 2 (alebo 1), ako v predchádzajúcom prípade.
4) Auto Hodnota. Označuje, že obrázok sa nezobrazí a použije sa počiatočná veľkosť. Súčasne môžu byť parametre tiež 2 alebo 1. To znamená, že môžete zadať nasledovné:
Veľkosť pozadia: 60% AUTO; / * Šírka obrazu bude 60% a výška je úmerná veľkostiam pôvodného obrázka * /
Kde bude riešenie pracovať na natiahnutie pozadia CSS?
Súdiac podľa stránky môžem použiť stránku, bude fungovať vo všetkých moderných prehliadačoch, vrátane IE verzie nie je nižšia ako 9. Takže nikto v zásade nie je nikto. Pozri tabuľku kompatibility: 
Dobrý deň, sediacich budov a milovníkov webových tém. Dnes chcem odpovedať na odpoveď na často položenú otázku Nielen nováčikov, ale niekedy vývojári: "Ako natiahnuť obrázok CSS pre celú obrazovku?" Takáto recepcia je v skutočnosti jednoducho implementovaná, ale potom je vec v druhom.
K dnešnému dňu existuje mnoho spôsobov a programovacích jazykov, vďaka ktorým je možné obrázok umiestniť na celú obrazovku. Preto v tejto publikácii budem hovoriť o niekoľkých spôsoboch, ako vytvoriť obraz s plnou veľkosťou pomocou CSS, CSS3, JQuery a PHP. Začneme ísť!
Metóda 1. Adaptívne pozadie Obrázok CSS
Ak chcete vytvoriť obraz pozadia adaptívne, tabuľky s kaskádovým štýlom poskytujú nehnuteľnosť pozadie-veľkosť. Umožňuje nastaviť veľkosť grafického súboru s ohľadom na veľkosť karty OPEN.
Na to potrebujete napísať túto čiaru:
pozadie-veľkosť: 100%auto.
Prvý parameter, t.j. 100% je zodpovedný za roztiahnutie obrázkov horizontálne, druhý parameter je vertikálne. Teraz sa obrátime na príklad.
Táto metóda je podporovaná prehliadačmi, počnúc 10 verziami, 3 verziami Safari, Firefox 3.6 a 9 verzie IE.
Metóda 2. Gumové pozadie s CSS3
S uvoľnením špecifikácie CSS3 boli do sveta pridané mnohé vhodné nástroje. Takže, na vytvorenie roztiahnutého pozadia ako obraz, rovnaká vlastnosť sa používa ako v predchádzajúcej kapitole, avšak veľkosť obrazu nie je daná percentami, ale špeciálnym pokrývaním slov: pozadie-veľkosť:kryt.. Veľmi pohodlné, nie?
Ak chcete zistiť, ako funguje táto vlastnosť, spustite posledný príklad zmenou parametrov veľkosti na pozadí 100% a AUTO kryt..
Samotný JQuery je veľmi pohodlný. Je ľahšie pracovať s API s ním, je ľahšie pristupovať k rôznym prvkom kódu a je tiež jednoduchšie implementovať niektoré veci.
Na to, aby bol tento spôsob, ako príklad, musíte najprv pripojiť skript JS tu je taký riadok:
Nižšie som pripojil programový kód príkladu s implementáciou JQuery, ktorá sa do neho už vložila.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
Planetárium v \u200b\u200botvorenej lokalite!Naučte sa vzdialené hviezdy, planéty a krátery Mesiaca ... |
Planetárium v \u200b\u200botvorenej lokalite!
Naučte sa vzdialené hviezdy, planéty a krátery Mesiaca ...
Táto metóda je univerzálna a podporovaná mnohými prehliadačmi, aj keď CSS nástrojov nefungujú.
Metóda 4. PHP-IMPLEMENTÁCIA NASTAVENÉHO OBRAZU
Niekoľko slov o samotnom jazyku. PHP je zvyčajný nazývaný skriptový jazyk. S ním píšu serverovú časť webových aplikácií, t.j. Bind Service s databázou, požiadavkami na proces atď. Samotný kód PHP je vložený do HTML a flexibilne s ním spolupôsobí.
Ak chcete vložiť kus kódu, musíte zaregistrovať text v týchto zátvorkách:
A teraz v počiatočnom príklade musíte vložiť len niekoľko riadkov:
| 1 2 3 4 5 |
Zistili túto lekciu na jednom kanáli YouTube. Veľmi užitočný čip pre web designer podľa môjho názoru.
Niekedy sa šírka pôvodného obrazu nestačí pre akýkoľvek dizajnérsky nápad, a jeho rozťahovanie na skresľuje potrebné objekty. Ak chcete tieto objekty bezpečne a zároveň zachrániť pozadie obrazu, Photoshop nám poskytuje určité nástroje. A tak, nakoniec máme z pôvodného obrázku:
Mal by to zmeniť:
Pokračujme. Otvorte náš obrázok do Photoshop a prideľujte objekt, ktorý potrebujete:
Ďalej prejdite na kartu Výber \u003e\u003e Uložte vybranú oblasť
A nastavte ľubovoľný svojvoľný názov pre tento výber:
Tak sme vytvorili oblasť, ktorá bude neskôr chránená pred zmenami. Ďalší krok prejdite na Úprava \u003e\u003e Stupnica s prihliadnutím na obsah:
A uistite sa, že ste zadali chránený predmet:
Všetko. Zostáva len zmeniť šírku obrazu pomocou štandardných nástrojov (buď v hornom paneli zmenou percentuálneho podielu na šírku, alebo len vytiahnite obrázok). Dôležitý Pred tým (alebo v samotnej fáze) zmeňte veľkosť plátna tak, aby hranice obrazu neprešli nad rámec jeho rozsahu.
Úloha
Natiahnite obrázok na pozadí na celej šírke okna prehliadača pomocou CSS3.
Rozhodnutie
Vlastnosť na pozadí je navrhnutá tak, aby mierka pozadie, 100% je zadaná ako jeho hodnota, potom pozadie zaberá celú šírku okna prehliadača. Pre staršie verzie prehliadačov použite špecifické vlastnosti s predponami, ako je znázornené v príklade 1.
Príklad 1. Pozadie ťahom
HTML5 CSS 2.1 IE CRO OP SA FX
Výsledok tohto príkladu je znázornený na obr. jeden.
Obr. 1. Pohľad na pozadie so zníženou veľkosťou okna
S rastúcou veľkosťou okna prehliadača sa pozadie začne aj rozširovanie, čo povedie k zhoršeniu typu obrazu (obr. 2).
Obr. 2. Pohľad na pozadie s zväčšenou veľkosťou okna
Účelom tejto lekcie zvážiť spôsoby, ako usporiadať obraz pozadia pre webovú stránku, ktorá bude vždy natiahnutá do všetkých okien prehliadača.
Technika s použitím iba CSS. Časť 1.
Použite malý prvok Ktoré rozmery možno zmeniť v ľubovoľnom prehliadači. Nainštalujte vlastnosť Min-Heen, aby ste vyplnili okno prehliadača vertikálne a vlastnosť šírky priradila hodnotu 100% na vyplnenie horizontálne. Tiež nainštalujte vlastnosť šírky Min-šírka rovná šírke obrazu, aby sa nikdy neznížila.
Tricky zdvih je použitie žiadosti o médiá, aby ste overili, či šírka okna prehliadača je menšia ako šírka obrazu, a pomocou percentuálnej kombinácie ľavého majetku a zápornej hodnoty pre ľavé pole na jadro na pozadí.
Tu je kód CSS:
IMG.BG (/ * Nastavte pravidlá na vyplnenie pozadia * / Min-výška: 100%; min-šírka: 1024px; / * Nastavte pomer proporcionality * / Šírka: 100%; Výška: AUTO; / * Nainštalovať polohovanie * / Poloha: pevná; TOP: 0; vľavo: 0;) @Media obrazovka a (max-šírka: 1024px) (/ * určená jeho pre každý špecifický obraz * / IMG.BG (vľavo: 50%; Margin-Left: -512px; / * päťdesiat% * /))
Pracuje v:
Všetky verzie normálneho prehliadača: Safari / Chrome / Opera / Firefox.
IE 6: nefunguje - ale môžete použiť niektoré triky na umiestnenie.
IE 7/8: Vo väčšine prípadov to funguje, nezahŕňa malé obrázky, ale správne vyplní obrazovku.
IE 9: Pracuje.
Technika s použitím iba CSS. Časť 2.
Ďalším spôsobom, ako vyriešiť úlohu je umiestniť malý prvok. Na stránke, upevnite svoju polohu v ľavom hornom rohu a nastavte hodnotu 100% pre svoju šírku min-šírky a mini výšky, pri zachovaní koeficientu proporcionality.
#Bg (pozícia: pevná, top: 0; vľavo: 0; / * Ušetríme pomer proporcionality * / min-šírka: 100%; min-výška: 100%;)
Avšak, takže obraz nie je vycentrovaný. Takto zabalte obraz do prvku
#Bg (pozícia: pevná; top: -50%; vľavo: -50%; šírka: 200%; výška: 200%;) #bg IMG (pozícia: Absolútna; TOP: 0; vľavo: 0; vpravo: 0; Dno: 0; Margin: Auto; min-šírka: 50%; min-výška: 50%;)
Pracuje v:
Safari / Chrome / Firefox (nie je testovaný na všetkých verziách, ale v druhom fungovaní funguje).
Tj 8+.
Opera (Akákoľvek verzia) a IE odmietnuť pracovať s touto metódou (nesprávny polohovanie obrázkov).
Používame jQuery
Myšlienka je veľmi jednoduchá, ak je pomer proporcionality obrazu (malý prvok Bude sa používať ako pozadie) v porovnaní s koeficientom proporcionality okna prehliadača. Ak je to menej pre obrázok, potom musíte priradiť len Šírka Obrazová vlastnosť Hodnota je 100%, a vyplní obrazovku a výšku a šírku. A ak je viac, potom priradiť len Výška Obrazová vlastnosť Hodnota je 100%.
#Bg (pozícia: pevná; top: 0; vľavo: 0;) .bgwidth (šírka: 100%;) .bgheight (výška: 100%;)
$ (Funkcia (funkcia) (var thewindow \u003d $ (okno), $ bg \u003d $ ("# bg"), aspektratio \u003d $ bg.width () / $ bg.height (); Funkcia ResizeBG () (ifindow. ) / thewindow.height ())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });
Pracuje v:
IE7 + (s zástrčkami pravdepodobne bude fungovať v IE6)
Vo všetkých ostatných prehliadačoch.
Záver
Akákoľvek z metód riešenia má svoje výhody a nevýhody. Musíte si vybrať vhodný prípad. Alebo navrhnite svoje vlastné.