obrázek na pozadí:
Popis
Vlastnost obrázku na pozadí(z anglického „obrázek na pozadí“ - „obrázek na pozadí“) nastaví obrázek pozadí prvku.
Poznámka
Při nastavování obrázku na pozadí byste měli také určit barvu pozadí, která bude použita, pokud obrázek není k dispozici. Když je obrázek k dispozici, zobrazí se přes barvu pozadí. (Tímto způsobem bude barva viditelná v průhledných částech obrázku).
Podmínky použití
Počínaje CSS3 (oddělené čárkami) můžete zadat více obrázků na pozadí najednou. Díky tomu budou spodní obrázky na pozadí viditelné přes průhledné oblasti horních obrázků na pozadí.
JavaScript
[objekt] .style .backgroundImage = "[hodnota]";
Podpora prohlížeče
Specifikace
Hodnoty
Všechny hodnoty CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3
Žádný Označuje žádný obrázek na pozadí. url (
obrázek na pozadí: url (myImage.png);
Url ("
obrázek na pozadí: url ("myImage.png");
Zdědit Udává, že prvek by měl zdědit parametry nadřazeného prvku.
Počáteční hodnota:"Žádný".
Příklad použití
Seznam kódů
Obrázek na pozadí
Dokument s více obrázky na pozadí.
Webový design začíná na pozadí.
Bude správné předepsat barvu pozadí - vlastnost barva pozadí pro bezpečnostní síť, pokud se obrázek nenačte. V závorkách url () zadejte cestu ke složce s obrázky.
Ve výchozím nastavení se obrázek bude opakovat jako „dlaždice“, dokud nevyplní celou obrazovku prohlížeče. Když se přesuneme po stránce dolů, naše „dlaždice“ vyplní druhou i třetí obrazovku, dokud obsah stránky skončí . Je jasné, že takový výsledek není výškou nápadu na design a nebudeme mít „koupelnu“, ale jen blog, kde je čitelnost velmi důležitým bodem.
Jednoduchou možností, jak se zbavit „obkladů“, je použít velký obrázek, široký alespoň 1024 px, aby zaplnil celou obrazovku. Bude také dobrým řešením najít bezproblémovou texturu, když bude obrázek znásoben, bude jako jeden celek.
Jak zatraktivnit pozadí?
Díky bohu, že na to máme pomocníky:
- neopakovat- zakázat opakování
- opakovat-x- opakování vzoru pouze horizontálně
- opakovat-y- opakování vzoru pouze svisle
Například:
Záhlaví blogu
Toto je textura pozadí, která se opakuje pouze horizontálně.
Dalším pomocníkem je vlastnost pozice na pozadí, umožňuje umístit obrázek na pozadí kamkoli na obrazovku. Tato technika je rozšířená v moderním webdesignu. Máme obrázek, ale není součástí obsahu, ale slouží pouze jako ozdoba webu.
Nadpis
Příklad neopakujícího se pozadí s daným umístěním.
Obrázek se zobrazí pouze jednou a je umístěn vpravo.
Odsazení od pravého okraje je nastaveno na 200 px, aby se zabránilo překrývání textu s pozadím.
Pokud chceme, aby byl obrázek při posouvání po obrazovce vždy viditelný, musíme přidat vlastnost do výše uvedeného kódu - připojení na pozadí: pevné;
Jaký je mezi tím rozdíl? obr a obrázek na pozadí?
Rozdíl je zásadní, tagu obr vložen přímo do těla Html-stránky a odpovídá za obsah (ilustrace, fotografie, avatary), nese sémantickou zátěž. Je velmi důležité, aby byl obrázek indexován vyhledávači a dostal se do výsledků vyhledávání. Vlastnosti CSS obrázek na pozadí- aby byl web jedinečný a krásný, tj. tento design, který by měl být přenesen do externího souboru CSS styly nebo použít uvnitř prvku styl.
To samozřejmě neznamená obrázek na pozadí nebude fungovat, pokud je vložen do těla Html-stránky. Důrazně však doporučuji, aby bylo vše, co se týká designu, odstraněno CSS... V důsledku toho se dočkáme čistého Html-kód:
- to bude mít pozitivní vliv na indexování webu, vyhledávací roboti si váš web zamilují a budou jej navštěvovat častěji.
- vaši návštěvníci budou také spokojeni, stránka se díky své nízké hmotnosti načte rychleji.
- vám, jako webmasterovi, usnadňuje práci s čistým kódem.
Zvažovali jsme víceméně všechny možnosti použití této vlastnosti CSS obrázek na pozadí... Více praxe přátelé! Neváhejte zkopírovat kód a přijít s vlastními možnostmi!
krátké informace
Verze CSS
Hodnoty
url Hodnota je cesta ke grafickému souboru, která je uvedena uvnitř konstrukce url (). V tomto případě může být cesta k souboru zapsána buď v uvozovkách (dvojité nebo jednoduché), nebo bez nich. none Zruší obrázek pozadí pro prvek. zdědí Zdědí hodnotu po nadřazené položce.HTML5 CSS2.1 IE Cr Op Sa Fx
Objektový model
document.getElementById ("elementID") .style.backgroundImage
Prohlížeče
Internet Explorer 7.0 nebo novější aplikuje pozadí na vnitřní stranu ohraničení prvku, který má nastavenou vlastnost hasLayout. Pokud prvek nemá hasLayout, vlastnost image na pozadí bude respektovat ohraničení prvku, jak je uvedeno ve specifikaci. Rozdíl v zobrazení bude patrný, pokud jsou okraje přerušované nebo tečkované, nikoli plné.
Pokud je prvek nastaven na posouvání nebo automatické, bude mít Internet Explorer 8 při posouvání pozadí svislé zpoždění o jeden pixel.
Internet Explorer až do verze 7.0 včetně tuto dědičnou hodnotu nepodporuje.
Pokud je pozadí nastaveno pro řádek tabulky (tag
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Výsledek tohoto příkladu v prohlížeči Chrome je uveden na obr. 1. Prohlížeč Internet Explorer, Opera a Firefox správně zobrazí pozadí řádku (obr. 2).
Rýže. 1. Opakování pozadí pro každou buňku
Rýže. 2. Pozadí pro celý řádek
krátké informace
Verze CSS
Hodnoty
url Hodnota je cesta ke grafickému souboru, která je uvedena uvnitř konstrukce url (). V tomto případě může být cesta k souboru zapsána buď v uvozovkách (dvojité nebo jednoduché), nebo bez nich. none Zruší obrázek pozadí pro prvek. zdědí Zdědí hodnotu po nadřazené položce.HTML5 CSS2.1 IE Cr Op Sa Fx
Objektový model
document.getElementById ("elementID") .style.backgroundImage
Prohlížeče
Internet Explorer 7.0 nebo novější aplikuje pozadí na vnitřní stranu ohraničení prvku, který má nastavenou vlastnost hasLayout. Pokud prvek nemá hasLayout, vlastnost image na pozadí bude respektovat ohraničení prvku, jak je uvedeno ve specifikaci. Rozdíl v zobrazení bude patrný, pokud jsou okraje přerušované nebo tečkované, nikoli plné.
Pokud je prvek nastaven na posouvání nebo automatické, bude mít Internet Explorer 8 při posouvání pozadí svislé zpoždění o jeden pixel.
Internet Explorer až do verze 7.0 včetně tuto dědičnou hodnotu nepodporuje.
Pokud je pozadí nastaveno pro řádek tabulky (tag
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Výsledek tohoto příkladu v prohlížeči Chrome je uveden na obr. 1. Prohlížeč Internet Explorer, Opera a Firefox správně zobrazí pozadí řádku (obr. 2).
Rýže. 1. Opakování pozadí pro každou buňku
Rýže. 2. Pozadí pro celý řádek
Myslím, že neexistuje jediný web, kde by se nemovitost nevyužívala CSS pozadí... Zdá se, co by mohlo být jednodušší než tato vlastnost? Ale ne, jeho možnosti jsou mnohem širší než obvyklý účel obrázku nebo barvy jako pozadí stránky. Něco bude známé, ale něco se pro mnohé určitě stane novinkou. V každém případě bude užitečné důkladně vědět, jak pozadí funguje.
CSS3 přinesl do služby spoustu nových věcí, jedná se o transparentnost a přiřazení více obrázků jako pozadí, ale o tom si povíme níže a nejprve se podíváme na základy vlastnosti. Pozadí.
barva pozadí
Jsem si docela jistý, že jste několikrát provedli přiřazení barev pozadí. To lze provést pomocí několika typů zápisů: pravidelný (používá se název barvy), hexadecimální nebo RGB. Každý typ je stejný, použijte ten, který se vám nejvíce líbí. Snažím se použít nejkratší verzi a pro vnímání je to jednodušší a soubor stylu je trochu menší.
P (barva pozadí: červená;) p (barva pozadí: # f00;) p (barva pozadí: # ff0000;) p (barva pozadí: rgb (255, 0, 0;))
CSS3 podporuje průhlednost, takže ji můžete přidat i do naší barvy, například takto:
P (barva pozadí: rgba (255, 0, 0, 0,5);)
Poslední číslice byla nastavena na 50% průhlednost. Hodnotu průhlednosti můžete nastavit od 0 (zcela průhledné pozadí) do 1 (zcela neprůhledné).
obrázek na pozadí
Tato vlastnost se také používá velmi často, umožňuje vám přiřadit obrázek k pozadí. CSS3 přidává možnost přiřadit na pozadí více obrázků, z nichž každý vytváří jakousi vrstvu, takže každý následující je překrýván s předchozím. Proč by to mohlo být užitečné? Všechno je celkem jednoduché - řekněme, že musíte přišroubovat malé knoflíky v každém rohu webu. Poskytování více či méně plynulého rozvržení pomocí jednoho obrázku není možné. Proto uděláme 4 „vrstvy“, přesuneme každý obrázek do jeho vlastního rohu a je to, problém je vyřešen
Body (obrázek na pozadí: url ("image1"), url ("image2"), url ("image3"))
Pokud potřebujete přiřadit jeden obrázek na pozadí, ponecháme v kódu pouze první, myslím, že je to pochopitelné.
Při používání libovolného obrázku jako pozadí je třeba mít na paměti dvě pravidla:
- nastavit kontrastní barvu pozadí v případě, že uživatel z nějakého důvodu nemůže zobrazit obrázek. Může vypnout zobrazení obrazů banální, šetří provoz.
- nepoužívejte obrázek na pozadí k předávání důležitých informací. Z výše uvedeného důvodu to uživatel nemusí vidět.
Podpora více obrázků na pozadí je dostatečně široká. Tuto vlastnost podporují všechny prohlížeče, dokonce i IE8.
