krátke informácie
CSS verzie
hodnoty
url Hodnota je cesta ku grafickému súboru, ktorá je špecifikovaná vo vnútri konštrukcie url(). V tomto prípade môže byť cesta k súboru napísaná v úvodzovkách (dvojitých alebo jednoduchých) a bez nich. none Zruší obrázok pozadia pre prvok. zdediť Zdedí hodnotu rodiča.HTML5 CSS2.1 IE Cr Op Sa Fx
Objektový model
document.getElementById("elementID ").style.backgroundImage
Prehliadače
internet Explorer do verzie 7.0 vrátane aplikuje pozadie na vnútornú stranu okraja prvku, ktorý má nastavenú vlastnosť hasLayout. Ak prvok nemá hasLayout , vlastnosť background-image bude rešpektovať hranice prvku, ako je uvedené v špecifikácii. Rozdiel vo vykreslení bude viditeľný, ak budú okraje prerušované (prerušované alebo bodkované ) a nie plné.
Ak je prvok nastavený na rolovanie alebo automatické posúvanie , Internet Explorer 8 bude mať pri rolovaní pozadia vertikálne oneskorenie jeden pixel.
Internet Explorer do verzie 7.0 nepodporuje zdediť hodnotu.
Ak je pozadie nastavené pre riadok tabuľky (tag
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Výsledok tento príklad v Prehliadač Chrome znázornené na obr. jeden. internetový prehliadač Prieskumník, Opera a Firefox správne zobrazujú pozadie riadku (obr. 2).
Ryža. 1. Zopakujte pozadie pre každú bunku
Ryža. 2. Pozadie pre celý riadok
A tu sa dostávame k hlavnej veci, preformulujme si to takto: „Stránka začína na pozadí.“ Väčšina blogerov robí „klasické blogy“ s bielym pozadím, my však pôjdeme inou cestou. Prejdite sa okolo nádhernej nehnuteľnosti css obrázok na pozadí, nemôžeme.
A čo to robí? Táto nehnuteľnosť css obrázok na pozadí vloží obrázok ako pozadie do rôznych prvkov HTML-stránky. Nie je to obmedzené na značku. telo a je široko používaný v dizajne webových stránok, napríklad pre: div, li, p, tabuľka, hlavička, päta.
Zvážte príklad:
Dizajn webových stránok začína na pozadí.
Správne bude nastavenie farby pozadia - property farba pozadia, na poistenie, ak sa obrázok nenačíta. v zátvorkách url() zadajte cestu k priečinku s obrázkami.
V predvolenom nastavení sa obrázok bude opakovať ako „dlaždica“, kým nevyplní celú obrazovku prehliadača, keď sa posunieme po stránke nadol, naša „dlaždica“ vyplní druhú aj tretiu obrazovku, a to len toľko, kým obsah stránky neskončí . Je jasné, že takýto výsledok nie je vrcholom nápadu na dizajn a nebudeme mať „kúpeľňu“, ale len blog, kde je čitateľnosť veľmi dôležitým bodom.
Jednoduchým spôsobom, ako sa zbaviť „dlaždíc“, je použiť veľký obrázok, široký aspoň 1024 px, aby vyplnil celú obrazovku. Aj to bude dobré rozhodnutie Nájsť bezšvová textúra, pri ktorej reprodukcii bude obraz ako jeden celok.
Ako zatraktívniť pozadie?
Vďaka Bohu, že na to máme pomocníkov:
- bez opakovania- zakázať opakovanie
- opakujte x- opakovanie vzoru len horizontálne
- opakovať-y- opakovanie vzoru len vertikálne
Napríklad:
Hlavička blogu
Toto je textúra pozadia, ktorá sa opakuje iba horizontálne.
Ďalší pomocník - Nehnuteľnosť pozícia na pozadí, umožňuje polohovanie obrázok na pozadí kdekoľvek na obrazovke. Tento prístup je rozšírený v moderný web dizajn. Máme obrázok, ale nie je súčasťou obsahu, ale slúži len ako dekorácia na stránku.
hlavička
Príklad neopakujúceho sa pozadia so špecifikovaným umiestnením.
Obrázok sa zobrazí iba raz a je vpravo.
Odsadenie od pravého okraja je nastavené na 200 px, aby sa predišlo kolízii textu na pozadí.
Ak chceme, aby bol obrázok vždy viditeľný pri posúvaní obrazovky nadol, musíme do vyššie uvedeného kódu pridať vlastnosť - pozadie: pevné;
Aký je rozdiel medzi img a obrázok na pozadí?
Rozdiel je zásadný, tag img vložené priamo do tela HTML-stránok a zodpovedá za obsah (ilustrácie, fotografie, avatary), nesie sémantickú záťaž. Je veľmi dôležité, aby bol obrázok indexovaný vyhľadávače a dostal sa do Výsledky vyhľadávania. Vlastnosti css obrázok na pozadí- urobte web jedinečným a krásnym, to znamená, že toto je dizajn, ktorý by sa mal preniesť do externého súboru cssštýly alebo použitie vo vnútri prvku štýl.
To samozrejme neznamená obrázok na pozadí nebude fungovať, ak sa umiestni do tela HTML-stránky. Dôrazne však odporúčam, aby sa všetko, čo súvisí s dizajnom, dostalo von css. V dôsledku toho dostaneme čisté HTML-kód:
- to pozitívne ovplyvní indexovanie stránky, vyhľadávacie roboty budú vašu stránku milovať a navštevovať ju častejšie.
- spokojní budú aj vaši návštevníci, stránka sa vďaka nízkej hmotnosti načíta rýchlejšie.
- ako správcovi webu je pre vás jednoduchšie pracovať s čistým kódom.
No, zvážili sme viac-menej všetky možnosti využitia nehnuteľnosti css obrázok na pozadí. Viac praxe priatelia! Neváhajte a skopírujte kód a vymyslite si vlastné možnosti!
Myslím, že neexistuje jediná lokalita, kde by sa nehnuteľnosť nevyužívala css pozadie. Zdalo by sa, čo môže byť jednoduchšie ako táto vlastnosť? Ale nie, jeho možnosti sú oveľa širšie ako bežné nastavenie obrázka alebo farby ako pozadia stránky. Niektoré budú známe a niektoré budú pre mnohých nové. V každom prípade bude užitočné dôkladne vedieť, ako pozadie funguje.
CSS3 prinieslo do vlastnosti veľa nových vecí, ako je priehľadnosť a nastavenie viacerých obrázkov ako pozadia, ale o tom si povieme nižšie, ale najprv sa budeme venovať základom vlastnosti pozadie.
farba pozadia
Som si istý, že priradenie farby pozadia ste už robili viackrát. Dá sa to urobiť pomocou niekoľkých typov zápisu: bežný (používa sa názov farby), hexadecimálny alebo RGB zápis. Každý typ je ekvivalentný, použite ten, ktorý sa vám najviac páči. Snažím sa používať najkratšiu verziu a pre vnímanie je jednoduchšia a súbor štýlov je o niečo menší.
P (farba pozadia: červená;) p (farba pozadia: #f00;) p (farba pozadia: #ff0000;) p (farba pozadia: rgb(255, 0, 0;))
CSS3 zavádza podporu transparentnosti, takže ju môžeme pridať do našej farby takto:
P (farba pozadia: rgba(255, 0, 0, 0,5);)
Posledná číslica nastavuje priehľadnosť na 50 %. Hodnotu priehľadnosti môžete nastaviť od 0 (úplne priehľadné pozadie) až 1 (úplne nepriehľadné).
obrázok na pozadí
Táto vlastnosť sa tiež používa veľmi často, umožňuje priradiť obrázok na pozadie. CSS3 pridáva možnosť priradiť k pozadiu viacero obrázkov, pričom každý vytvára určitý druh vrstvy, takže každý nasledujúci prekrýva ten predchádzajúci. Prečo by to mohlo byť užitočné? Všetko je celkom jednoduché - povedzme, že musíte v každom z rohov stránky priskrutkovať malé veci. V prípade viac-menej plynulého rozloženia nie je možné použiť jeden obrázok. Preto urobíme 4 „vrstvy“, každý obrázok presunieme do vlastného rohu a je to, problém je vyriešený
Text (obrázok na pozadí: url("obrázok1"), url("obrázok2"), url("obrázok3"))
Ak potrebujete k pozadiu priradiť jeden obrázok, v kóde necháme len prvý, myslím, že je to pochopiteľné.
Pri použití akéhokoľvek obrázka ako pozadia je potrebné pamätať na dve pravidlá:
- nastaviť kontrastnú farbu pozadia pre prípad, že používateľ z nejakého dôvodu nevidí obrázok. Dokáže jednoducho zakázať zobrazovanie obrázkov, šetrí premávku.
- nepoužívajte na vyjadrenie žiadny obrázok na pozadí dôležitá informácia. Z vyššie uvedeného dôvodu ho používateľ nemusí vidieť.
Podpora viacerých obrázkov na pozadí je pomerne rozsiahla. Všetky prehliadače, dokonca aj IE8, podporujú túto vlastnosť.
obrázok na pozadí:
Popis
vlastnosť obrázka na pozadí(z angličtiny "obrázok na pozadí" - "obrázok na pozadí") nastavuje obrázok na pozadí prvku.
Poznámka
Pri nastavovaní obrázka pozadia by ste mali určiť aj farbu pozadia, ktorá sa použije, ak obrázok nie je k dispozícii. Keď je obrázok k dispozícii, zobrazí sa cez farbu pozadia. (Farba bude teda viditeľná v priehľadných častiach obrázka).
Podmienky používania
Počnúc CSS3 (oddelené čiarkami) môžete zadať viacero obrázkov na pozadí naraz. Vďaka tomu budú spodné obrázky na pozadí viditeľné cez priehľadné oblasti obrázkov na hornom pozadí.
JavaScript
[objekt] .style .backgroundImage ="[hodnota]";
Podpora prehliadača
Špecifikácia
hodnoty
Všetky hodnoty CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3
None Určuje, že na pozadí nie je žiadny obrázok. url(
background-image: url(myImage.png );
Url("
background-image: url("myImage.png");
Zdediť Určuje, že prvok by mal zdediť nastavenia nadradeného prvku.
Pôvodná hodnota:„žiadny“.
Príklad použitia
Výpis kódu
obrázok na pozadí
Dokument s viacerými obrázkami na pozadí.
Objektový model
document.getElementById("elementID ").style.backgroundImage
Prehliadače
Internet Explorer až do verzie 7.0 vrátane použije pozadie na vnútornú stranu okraja prvku, ktorý má nastavenú vlastnosť hasLayout. Ak prvok nemá hasLayout , vlastnosť background-image bude rešpektovať hranice prvku, ako je uvedené v špecifikácii. Rozdiel vo vykreslení bude viditeľný, ak budú okraje prerušované (prerušované alebo bodkované ) a nie plné.
Ak je prvok nastavený na rolovanie alebo automatické posúvanie , Internet Explorer 8 bude mať pri rolovaní pozadia vertikálne oneskorenie jeden pixel.
Internet Explorer do verzie 7.0 nepodporuje zdediť hodnotu.
Ak je pozadie nastavené pre riadok tabuľky (tag
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Výsledok tohto príkladu v prehliadači Chrome je znázornený na obr. 1. Prehliadač Internet Explorer, Opera a Firefox správne zobrazuje pozadie linky (obr. 2).
Ryža. 1. Zopakujte pozadie pre každú bunku
Ryža. 2. Pozadie pre celý riadok