Stiilid

Taustamanuse atribuudi vaikeväärtus on scroll , mis tähendab, et taust kerib mööda elementi. Kui määrate väärtuseks fikseeritud , siis asukoht fikseeritakse.

Body, html, main ( /* oluline */ kõrgus: 100%; ) .cd-fixed-bg ( min-height: 100%; background-size: cover; background-attachment: fikseeritud; background-repeat: no-repeat ; tausta-positsioon: keskel; bg.cd-bg-2 ( taustapilt: url(../img/cd-background-2.jpg"); ) .cd-fixed-bg.cd-bg-3 ( taustapilt: url( "../img/cd-background-3.jpg" ) .cd-fixed-bg.cd-bg-4 ( background-image: url(../img/cd-background-4.jpg" ); .cd-scrolling-bg ( min-kõrgus: 100%; )

Paigaldades laua alla statsionaarse taustapildi, milles on tekst ja muu kasulik teave, tekib järgmine efekt: tekstiga tabelit kerides jääb selle all olev taust paigale ega liigu tabeliga kaasa. Nagu siin:

See efekt võib luua teie lehtedel kahekihilisuse illusiooni ja ruumi.
Tavaliselt saavutatakse liikumatu pildi tausta efekt CSS-i stiililehele järgmiste atribuutide määramisega: background-attachment:fix; Jutt käib CSS-i stiililehest, mis on teil eraldi dokumendis laiendiga .css

Vajaliku installimiseks on mitu võimalust.

1. meetod.

Valime pildi, millest saab meie taust. Sel juhul teen selle pildi (täissuuruses vaatamiseks klõpsake pisipildil):

Sisestage css-stiilis dokumenti, kus määrame BODY parameetrid, järgmine konstruktsioon:

BODY(taustapilt: url(taustapildi aadress); taustamanus: fikseeritud; taustakordus: ei korda; tausta asukoht: ülemine;)

Sel juhul võtame taustapildiks suure täisekraanpildi (näiteks 1280 x 1024 px).

Märkus. Kui teil pole css-stiilis dokumenti, peate selle looma, nagu näidatud punktis - ja lisama oma html-lehe koodisse lingi css-stiilis dokumendile, nagu on näidatud samas õppetükis.

Niisiis, siin on parameetrid, mille me stiilide abil määrame:

Taustapilt: url(taustapildi aadress); - sisestage meie taustapildi aadress 1280 x 1024 px.

Taustakinnitus: fikseeritud; - anname taustale juhise jääda fikseerituks ehk liikumatuks.

Background-repeat: no-repeat; - anname taustale juhise mitte reprodutseerida.

Tausta asend: üleval; - määrake taustpildi asukoht: määrake lehe ülaserva.

Niisiis, sisestasime selle konstruktsiooni css-stiilis dokumenti jaotises BODY:

BODY(taustapilt: url(taustapildi aadress); taustamanus: fikseeritud; taustakordus: ei korda; tausta asukoht: ülemine;)

Tegin 70% ekraanist lihtsa tabeli ja paigutasin sellesse selguse huvides teksti ja kaks pilti. See on see, mida saime lehele: (statsionaarse tausta mõju nägemiseks kerige lehte üles ja alla).

2. meetod.

Proovime panna väikese pildi, mis kordab automaatselt ja täidab kogu lehe ruumi, moodustades taustamustri. Siin on pilt:

Samal ajal parandame kogu tausta, kirjutades CSS-i stiililehele järgmise konstruktsiooni:

BODY (taustapilt: url (taustapildi aadress); taustamanus: fikseeritud; )

Siin määrame ainult parameetri: background-attachment:fix; - see tähendab, et nad kirjutasid brauserile ette juhise taustpildi liikumatuks muutmiseks. Kuna me ei öelnud pildile "mitte korrutada", peaks see paljunema kogu ekraanil.

3. meetod.

Proovime paigaldada ühele küljele taustapildi, teisele küljele asetame tabeli teksti ja piltidega, et see ei blokeeriks taustapilti. Selleks kirjutage CSS-i dokumenti järgmine tekst:

BODY ( taust:#e0ddd8 url (taustapildi aadress) kordusteta fikseeritud vasak ülemine )

Background:#e0ddd8 url (taustapildi aadress) – taustapildi all olev värv on beež, mis sobib pildi enda taustavärviga. Seda tehakse nii, et meie pildi üleminek taustale poleks nähtav (pilt võtab ainult osa ekraanist).

No-repeat - pilt ei korruta (seal on üks suur pilt ühe mu lemmik Ameerika näitlejaga - Robert Duvall).

Fikseeritud - taust on fikseeritud, st liikumatu.

Vasak ülaosa - joondatud ekraani ülemise vasaku servaga (saate pildi paremale ja saidi tabeli vasakule, nagu soovite. Selleks kirjutage tabelis olevasse html-dokumenti:

See lühike õppetund räägib sellest, kuidas luua oma veebisaidile (või ühelehelisele lehele) ilus fikseeritud taust, mis liigub sujuvalt ühelt pildilt teisele, kui kasutaja lehte kerib. CSS-il on taustmanus: fikseeritud omadus, mis võimaldab teil taustapilti parandada. See tähendab, et kui kerite lehte, siis see ei keri koos lehega. Kuid CSS-is pole atribuuti, mis võimaldaks meil kerimisel pilte muuta, seega kasutame Javascripti.

Saidi jaoks fikseeritud taust

Te ei pruugi aru saada, millest ma kirjutan, nii et vaadake demo ja näete seda kaunist efekti ise:

Laadi alla

Kuidas teha veebisaidile muutuvat tausta?

HTML

Alustuseks määratleme selle lehe HTML-i struktuuri, mille jaoks me seda efekti teeme:

Sildis