obrázok na pozadí: | žiadny; obrázok na pozadí: | žiadny | dediť; obrázok na pozadí: <фн-изображение> [ , <фн-изображение> ]*; <фн-изображение> = | žiadny

Popis

Vlastnosť obrázku na pozadí(z angličtiny „obrázok na pozadí“ - „obrázok na pozadí“) nastaví obrázok pozadia prvku.

Poznámka

Pri nastavovaní obrázka na pozadí by ste mali tiež určiť farbu pozadia, ktorá sa použije, ak obrázok nie je k dispozícii. Keď je obrázok k dispozícii, zobrazí sa nad farbou pozadia. (Farba bude týmto spôsobom viditeľná v priehľadných častiach obrázku).

Podmienky používania

Počnúc CSS3 (oddelenými čiarkami) môžete zadať viac obrázkov na pozadí naraz. Vďaka tomu budú spodné obrázky na pozadí viditeľné cez priehľadné oblasti horných obrázkov na 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

Žiadne Označuje žiadny obrázok na pozadí. url ( ) Určuje reťazec URI obrázka vo vnútri adresy „url (...)“.

obrázok na pozadí: url (myImage.png);

Url (" ") Špecifikuje reťazec URI obrázka v rámci" url (...) "a reťazec URI je označený znakmi DOUBLE QUOTE" "".

obrázok na pozadí: url ("myImage.png");

Inherit Udáva, že prvok by mal zdediť parametre nadradeného prvku.

Pôvodná hodnota:„Žiadny“.

Príklad použitia

Zoznam kódov

Obrázok na pozadí

Dokument s viacerými obrázkami na pozadí.

> Vlastnosť obrázku na pozadí>

Webový design začína na pozadí.

Bude správne predpísať farbu pozadia - vlastnosť farba pozadia, pre bezpečnostnú sieť, 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 pohybujeme po stránke nadol, naša „dlaždica“ vyplní druhú aj tretiu obrazovku, pokiaľ sa obsah stránky skončí . Je jasné, že takýto výsledok nie je výškou nápadu na dizajn a nebudeme mať „kúpeľňu“, ale iba blog, kde je veľmi dôležitým bodom čitateľnosť.

Jednoduchou možnosťou, ako sa zbaviť „obkladu“, je použiť veľký obrázok, široký aspoň 1024 px, aby vyplnil celú obrazovku. Bude to tiež dobré riešenie na nájdenie bezproblémovej textúry, keď bude obrázok vynásobený, bude ako jeden celok.

Ako zatraktívniť pozadie?

Vďaka bohu, že na to máme pomocníkov:

• neopakovať- vypnúť opakovanie
• opakovať-x- opakovanie vzoru iba horizontálne
• opakovať-y- opakovanie vzoru iba vertikálne

Napríklad:

Hlavička blogu

Toto je textúra pozadia, ktorá sa opakuje iba horizontálne.

Ďalším pomocníkom je nehnuteľnosť Pozícia na pozadí, vám umožňuje umiestniť obrázok na pozadí kdekoľvek na obrazovke. Táto technika je rozšírená v modernom webovom dizajne. Máme obrázok, ale nie je súčasťou obsahu, ale slúži iba ako ozdoba webu.

Nadpis

Príklad neopakujúceho sa pozadia s daným umiestnením.

Obrázok sa zobrazí iba raz a je umiestnený vpravo.

Odsadenie od pravého okraja je nastavené na 200 px, aby sa zabránilo prekrývaniu textu s pozadím.

Ak chceme, aby bol obrázok pri rolovaní po obrazovke vždy viditeľný, musíme pridať vlastnosť do kódu vyššie - príloha na pozadí: pevná;

Aký je medzi tým rozdiel? obr a obrázok na pozadí?

Rozdiel je zásadný, tag obr vložené priamo do tela Html-stránky a je zodpovedný za obsah (ilustrácie, fotografie, avatary), nesie sémantickú záťaž. Je veľmi dôležité, aby bol obrázok indexovaný vyhľadávacími nástrojmi a dostal sa do výsledkov vyhľadávania. Vlastnosti Obrázok na pozadí CSS- urobte stránku jedinečnou a krásnou, to znamená tento dizajn, ktorý by mal byť prenesený do externého súboru CSSštýlov alebo použite vo vnútri prvku štýl.

To však samozrejme neznamená obrázok na pozadí nebude fungovať, ak bude vložený do tela Html-stránky. Dôrazne však odporúčam, aby bolo zverejnené všetko, čo súvisí s dizajnom CSS... V dôsledku toho sa dočkáme čistého Html-kód:

• to bude mať pozitívny vplyv na indexovanie stránok, vyhľadávacím robotom sa bude váš web páčiť a bude ho navštevovať častejšie.
• vaši návštevníci budú tiež spokojní, stránka sa vďaka svojej nízkej hmotnosti načíta rýchlejšie.
• vám ako webmasterovi je práca s čistým kódom jednoduchšia.

Zvážili sme viac -menej všetky možnosti použitia nehnuteľnosti Obrázok na pozadí CSS... Viac praxe priatelia! Nebojte sa skopírovať kód a prísť s vlastnými možnosťami!

krátke info

Verzie CSS

Hodnoty

url Hodnota je cesta k grafickému súboru, ktorá je zadaná v konštrukcii url (). V tomto prípade môže byť cesta k súboru zapísaná buď v úvodzovkách (dvojitých alebo jednoduchých), alebo bez nich. none Zruší obrázok na pozadí pre prvok. dedí Dedí hodnotu po rodičovi.

HTML5 CSS2.1 IE Cr Op Sa Fx

Objektový model

document.getElementById ("elementID") .style.backgroundImage

Prehliadače

Internet Explorer 7.0 alebo novší aplikuje pozadie na vnútornú stranu okraja prvku, ktorý má nastavenú vlastnosť hasLayout. Ak prvok nemá hasLayout, vlastnosť background-image bude rešpektovať ohraničenie prvku, ako je uvedené v špecifikácii. Rozdiel v zobrazení bude viditeľný, ak sú okraje prerušované alebo bodkované a nie pevné.

Ak je prvok nastavený na posúvanie alebo automatické, Internet Explorer 8 bude mať pri posúvaní pozadia zvislé oneskorenie jeden pixel.

Internet Explorer až do verzie 7.0 vrátane túto hodnotu dedičnosti nepodporuje.

Ak je pozadie nastavené pre riadok tabuľky (tag ), potom ho Chrome, Safari, iOS nezobrazujú podľa špecifikácie, konkrétne pre každú bunku zvlášť. Zatiaľ čo prehliadač by mal zobrazovať pevné pozadie pre celý riadok. Príklad 2 ukazuje kód na demonštráciu chyby.

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 riadka (obr. 2).

Ryža. 1. Opakovanie pozadia pre každú bunku

Ryža. 2. Pozadie pre celý riadok

krátke info

Verzie CSS

Hodnoty

url Hodnota je cesta k grafickému súboru, ktorá je zadaná v konštrukcii url (). V tomto prípade môže byť cesta k súboru zapísaná buď v úvodzovkách (dvojitých alebo jednoduchých), alebo bez nich. none Zruší obrázok na pozadí pre prvok. dedí Dedí hodnotu po rodičovi.

HTML5 CSS2.1 IE Cr Op Sa Fx

Objektový model

document.getElementById ("elementID") .style.backgroundImage

Prehliadače

Internet Explorer 7.0 alebo novší aplikuje pozadie na vnútornú stranu okraja prvku, ktorý má nastavenú vlastnosť hasLayout. Ak prvok nemá hasLayout, vlastnosť background-image bude rešpektovať ohraničenie prvku, ako je uvedené v špecifikácii. Rozdiel v zobrazení bude viditeľný, ak sú okraje prerušované alebo bodkované a nie pevné.

Ak je prvok nastavený na posúvanie alebo automatické, Internet Explorer 8 bude mať pri posúvaní pozadia zvislé oneskorenie jeden pixel.

Internet Explorer až do verzie 7.0 vrátane túto hodnotu dedičnosti nepodporuje.

Ak je pozadie nastavené pre riadok tabuľky (tag ), potom ho Chrome, Safari, iOS nezobrazujú podľa špecifikácie, konkrétne pre každú bunku zvlášť. Zatiaľ čo prehliadač by mal zobrazovať pevné pozadie pre celý riadok. Príklad 2 ukazuje kód na demonštráciu chyby.

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 riadka (obr. 2).

Ryža. 1. Opakovanie pozadia pre každú bunku

Ryža. 2. Pozadie pre celý riadok

Myslím si, že neexistuje ani jeden web, kde by sa nehnuteľnosť nevyužívala CSS pozadie... Zdá sa, čo by mohlo byť jednoduchšie ako táto vlastnosť? Ale nie, jeho možnosti sú oveľa širšie ako obvyklý účel obrázku alebo farby ako pozadia stránky. Niečo bude známe, ale niečo sa pre mnohých určite stane novinkou. V každom prípade bude užitočné dôkladne vedieť, ako pozadie funguje.

CSS3 priniesol do služby veľa nových vecí, je to transparentnosť aj priradenie viacerých obrázkov ako pozadia, ale o tom si povieme nižšie a najskôr sa pozrime na základy vlastnosti. pozadie.

farba pozadia

Som si celkom istý, že ste niekoľkokrát urobili priradenie farby pozadia. To je možné vykonať pomocou niekoľkých typov zápisov: pravidelných (používa sa názov farby), hexadecimálnych alebo RGB. Každý typ je rovnaký, použite ten, ktorý sa vám najviac páči. Snažím sa použiť najkratšiu verziu a pre vnímanie je to jednoduchšie a súbor štýlu 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 podporuje transparentnosť, takže ho môžete pridať aj do našej farby takto:

P (farba pozadia: rgba (255, 0, 0, 0,5);)

Posledná číslica bola nastavená na 50% priehľadnosť. Hodnotu priehľadnosti môžete nastaviť od 0 (úplne priehľadné pozadie) do 1 (úplne nepriehľadné).

obrázok na pozadí

Táto vlastnosť sa tiež používa veľmi často, umožňuje vám priradiť obrázku pozadie. CSS3 pridáva možnosť priradiť k obrázku viacero obrázkov, pričom každý vytvára druh vrstvy, takže každý nasledujúci je prekrývajúci s predchádzajúcim. Prečo by to mohlo byť užitočné? Všetko je celkom jednoduché - povedzme, že musíte skrutkovať malé gombíky v každom rohu stránky. Poskytnutie viac -menej plynulého rozloženia pomocou jedného obrázku nie je možné. Preto urobíme 4 „vrstvy“, presunieme každý obrázok do vlastného rohu a je to, problém je vyriešený

Body (obrázok na pozadí: adresa URL („obrázok1“), adresa URL („obrázok2“), adresa URL („obrázok3“))

Ak potrebujete priradiť jeden obrázok k pozadiu, ponecháme v kóde iba prvý obrázok, myslím si, že je to pochopiteľné.
Pri použití akéhokoľvek obrázku ako pozadia je potrebné mať na pamäti dve pravidlá:

• nastaviť kontrastnú farbu pozadia v prípade, že používateľ z nejakého dôvodu nemôže zobraziť obrázok. Dokáže vypnúť zobrazenie obrázkov a ušetrí dopravu.
• nepoužívajte obrázok na pozadí na sprostredkovanie dôležitých informácií. Z vyššie uvedeného dôvodu to užívateľ nemusí vidieť.

Podpora viacerých obrázkov na pozadí je dostatočne široká. Túto funkciu podporujú všetky prehliadače, dokonca aj IE8.