Ve výchozím nastavení, když posouváte webovou stránku s pozadím, pozadí se posouvá spolu s ostatními prvky. Někdy je to vhodné, ale někdy chcete, aby obrázek určený pomocí obrázku na pozadí zůstal vždy viditelný. K ovládání tohoto stavu existuje vlastnost background-attachment.
hodnoty pozadí
Vlastnost může mít tři hodnoty pro přizpůsobení chování pozadí:
- rolování (výchozí) - obrázek na pozadí se při rolování webové stránky pohybuje spolu s ostatními prvky.
- Fixed - hodnota opraví obrázek na pozadí, takže nebude citlivý na rolování. Při posouvání stránky zůstane pozadí nehybné.
- local - tato hodnota byla přidána, protože v případě místního rolování pozadí s hodnotou svitek Chovej se jako pevný. Když hodnota místní pozadí se posouvá spolu s obsahem prvku a neposouvá se, pokud se neposouvá obsah (ale posouvá se spolu s prvkem samotným).
Chcete-li lépe porozumět tomu, jak nemovitost funguje, podívejte se na příklady níže. Můžete je tedy porovnat, vaše hodnoty přílohy na pozadí jsou všechny tři (doufáme, že při učení CSS používáte moderní desktopový prohlížeč!).
background-attachment: scroll
pozadí-příloha: pevná
pozadí-příloha: místní
Podpora prohlížeče
Desktopové prohlížeče IE9+, Edge 12+, Firefox 25+, Chrome (všechny verze), Safari 5+, Opera 11.5+ mají plnou podporu pro všechny hodnoty vlastnosti background-attachment. Mezi mobilními prohlížeči rozumí všem významům Opera Mobile, Firefox pro Android, IE Mobile a QQ Browser. V jiných prohlížečích je podpora buď částečná, nebo chybí.
Dále v tutoriálu: vlastnosti background-origin a background-clip pro umístění obrázků na pozadí a ovládání oříznutí.
Tato krátká lekce bude o tom, jak vytvořit krásné pevné pozadí na vašem webu (nebo na jednostránkové stránce), které bude plynule přecházet z jednoho obrázku na druhý, jak uživatel posouvá stránku. CSS má vlastnost background-attachment: fixed, která umožňuje opravit obrázek na pozadí. To znamená, že když stránku posunete, nebude se posouvat se stránkou. V CSS ale není žádná vlastnost, která by nám umožňovala měnit obrázky při rolování, takže použijeme Javascript.
Opraveno pozadí webu
Možná nerozumíte tomu, o čem píšu, takže se podívejte na ukázku a sami uvidíte tento krásný efekt:
Stažení
Jak udělat měnící se pozadí pro web?
HTML
Začneme definováním struktury HTML stránky, pro kterou vytváříme tento efekt:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div id = "cbp-fbscroller" class = "cbp-fbscroller" > |
Ve štítku definovali jsme blokovou navigaci pomocí různé obrázky. To je vše se značkami HTML. Pojďme ke stylům.
CSS
Co se týče stylů, tak těch tady moc není.
Výšku bloku děláme co nejvyšší. Tedy výšku okna prohlížeče uživatele.
| 1 2 3 4 5 6 | html , tělo , .container, .cbp-fbscroller, .cbp-fbscroller sekce ( výška : 100 % ; ) |
| 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 | .cbp-fbscroller > nav ( pozice : pevná ; /* menu je vždy na stejném místě */ z-index: 9999; /* nic by nemělo překrývat nabídku */ vpravo: 100px; /* je to 100 pixelů od pravého okraje */ horní: 50 %; /* a svisle uprostřed stránky */šířka: 26px; /* šířka nabídky */ -webkit-transform : translateY(-50% ) ; -moz-transform : translateY(-50%) ; -ms-transform : translateY(-50%) ; transform : translateY(-50%) ; ) /* níže jsou styly pro každý prvek (odkaz) v nabídce */.cbp-fbscroller > nav a ( display : block ; position : relativní ; z-index : 9999 ; color : transparent ; width : 26px ; height : 26px ; obrys : žádný ; margin : 25px 0 ; border-radius : 50 % ; border : 4px solid #fff ; ) .no-touch .cbp-fbscroller > nav a :hover ( background : rgba(255 , 255 , 255 , 0.6 ) ; ) .cbp-fbscroller > nav a.cbp-f #fff ;) |
Vyjádřil jsem se k některým nemovitostem, myslím, že je jasné, která nemovitost je za co zodpovědná. Pokud ne tak docela, napište do komentářů! 🙂
V důsledku toho získáme následující nabídku:
| 1 2 3 4 5 6 7 8 9 10 | .cbp-fbscroller sekce ( position : relativní ; background-position : nahoře uprostřed ; background-repeat : no-repeat ; background-size : cover; ) .no-touch .cbp-fbscroller sekce ( background-attachment : fixed ; ) |
Zbývá nastavit potřebné obrázky pro odpovídající bloky:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | #fbsection1 ( background-image : url (../images/1 .jpg) ; ) #fbsection2 ( background-image : url (../images/2 .jpg) ; ; ) #fbsection3 ( background-image : url (. ./images/3 .jpg) ; ) #fbsection4 ( background-image : url (../images/4 .jpg) ; ) #fbsection5 ( background-image : url (../images/5 .jpg) ; ) |
Javascript odešel!/script ><skript >$(funkce() ( cbpFixedScrollLayout.init(); ));</script>
Závěr
To je vše. Krásný efekt, a myslím, že nebude těžké ho vložit na váš web! Přeji úspěch, pokud budete mít s instalací nějaké problémy, napište do komentářů :)
P.S.: Změnil jsem design stránek. Podle mě je to modernější a pohodlnější.
stručné informace
CSS verze
Hodnoty
fixní Znehybní obrázek pozadí prvku. rolování Umožňuje, aby se pozadí pohybovalo spolu s obsahem. inherit Zdědí hodnotu rodiče. local Pozadí je pevné s ohledem na chování prvku. Pokud má prvek posun, pozadí se bude posouvat spolu s obsahem, ale pozadí mimo prvek zůstane na svém místě.HTML5 CSS2.1 IE Cr Op Sa Fx
HTML5 CSS3 IE Cr Op Sa Fx
Objektový model
document.getElementById("elementID ").style.backgroundAttachment
Prohlížeče
V prohlížeči internet Explorer 6 pevná hodnota funguje pouze pro značky
nebo .Verze aplikace Internet Explorer do 7.0 včetně nepodporují dědičnou hodnotu.
Chrome podporuje místní hodnotu od verze 4.0.
Safari podporuje místní hodnotu od verze 5.0.
Firefox nerozumí významu místního .
Při instalaci pevného pozadí pod stůl, ve kterém budeme mít text a jiné užitečné informace, vznikne následující efekt: při rolování tabulkou s textem zůstává pozadí pod ní nehybné a nepohybuje se spolu s tabulkou. Jako tady:
Tento efekt může vytvořit určitou iluzi dvojitého vrstvení, určitého prostoru na vašich stránkách.
Efektu pozadí statického obrázku je obvykle dosaženo nastavením následujících atributů pro šablonu stylů CSS: background-attachment: fixed; Mluvíme o CSS stylů, které máte v samostatném dokumentu s příponou .css
Existuje několik způsobů, jak nainstalovat to, co potřebujeme.
1. způsob.
Vybereme obrázek, který bude naším pozadím. V v tomto případě Fotím tento obrázek (kliknutím na náhled zobrazíte plnou velikost):
Dokumentovat css styly, kde nastavujeme parametry pro BODY, vložte následující konstrukci:
BODY(obrázek na pozadí: url(adresa obrázku na pozadí); příloha na pozadí: opraveno; opakování na pozadí: bez opakování; pozice na pozadí: nahoře;)
V tomto případě bereme jako obrázek na pozadí velký obrázek celá obrazovka (například 1280 x 1024 px).
Poznámka: Pokud nemáte dokument ve stylu css, musíte jej vytvořit, jak je uvedeno v - a přidat odkaz na dokument ve stylu css do kódu vaší html stránky, jak je uvedeno ve stejné lekci.
Zde jsou parametry, které nastavujeme pomocí stylů:
Obrázek na pozadí: url(adresa obrázku na pozadí); - zadejte adresu našeho obrázku na pozadí 1280 x 1024 px.
Uchycení na pozadí: pevné; - dáváme pozadí pokyn, aby zůstalo fixované, tedy nehybné.
Opakování na pozadí: bez opakování; - dáváme pozadí pokyn nereprodukovat.
Pozice pozadí: nahoře; - nastavte pozici obrázku na pozadí: nastavte na horní okraj stránky.
Tuto konstrukci jsme tedy vložili do dokumentu stylu css do BODY:
BODY(obrázek na pozadí: url(adresa obrázku na pozadí); příloha na pozadí: opraveno; opakování na pozadí: bez opakování; pozice na pozadí: nahoře;)
Na 70 % obrazovky jsem vytvořil jednoduchou tabulku a do ní pro přehlednost umístil text a dva obrázky. Na stránce máme toto: (chcete-li vidět efekt nehybného pozadí, posouvejte stránku nahoru a dolů).
2. způsob.
Zkusme vložit malý obrázek, který se bude automaticky opakovat a vyplní celý prostor stránky a vytvoří vzor pozadí. Tady je obrázek:
Zároveň opravíme celé pozadí tak, že do šablony stylů CSS napíšeme následující konstrukci:
BODY (obrázek na pozadí: url (adresa obrázku na pozadí); příloha na pozadí: opraveno; )
Zde pouze nastavíme parametr: background-attachment: fixed; - tedy předepsali prohlížeči pokyn, aby byl obrázek na pozadí nehybný. Protože jsme obrázku neřekli, aby se nemnožil, měl by se množit na celé obrazovce.
3. způsob.
Zkusme nainstalovat obrázek na pozadí na jednu stranu a na opačnou stranu umístěte tabulku s textem a obrázky, aby neblokovala obrázek na pozadí. Chcete-li to provést, napište do dokumentu CSS následující:
BODY ( background:#e0ddd8 url (adresa obrázku na pozadí) neopakovat se opraveno vlevo nahoře)
Pozadí:#e0ddd8 url (adresa obrázku na pozadí) - barva pod obrázkem na pozadí je béžová, která odpovídá barvě pozadí samotného obrázku. To se děje tak, že přechod našeho obrázku do pozadí není viditelný (obrázek zabírá pouze část obrazovky).
Bez opakování - obrázek se nemnoží (je tam jeden velký obrázek s jedním z mých oblíbených amerických herců - Robertem Duvallem).
Pevné - pozadí je pevné, tedy nehybné.
Vlevo nahoře – zarovnáno k levému hornímu okraji obrazovky (obrázek můžete umístit napravo a tabulku webu nalevo, jak chcete. Chcete-li to provést, html dokument do tabulky napíšete: