Danes skoraj vsak dizajn spletnega mesta vsebuje čudovito sliko ozadja.
Vsak oblikovalec postavitev ve, da je najenostavnejši način za ustvarjanje dizajna najboljši, kar je lahko. Ena od preprostih in priročnih tehnik je uporaba več vrstice css kodo.
Zdi se, da je majhna stvar, vendar je včasih treba narediti nekaj zapletenega na preprost način. Na primer, implementirajte več ozadij s posameznimi parametri, brez uporabe pomožnih blokov div. Oziroma varčevanje.
V tem članku si bomo ogledali sintakso kode, ki podpira več ozadij v enem elementu. Takole je videti v resničnem življenju:
Koda CSS za več ozadij
Več slik ozadja je implementiranih z uporabo več vrednosti parametrov ozadja css, ki so ločene z vejico:
#multipleBGs ( ozadje: url(foto1.png), url(foto2.png), url(foto3.png) ; ponavljanje ozadja: brez ponavljanja, brez ponavljanja, ponavljanje-y; položaj ozadja: 0 0, 30px 70px, desno zgoraj; širina: 400px; polna #ccc;
Enako sem poskušal narediti s kratko kodo. Na žalost ne gre.
Poleg tega lahko uporabite druge lastnosti ozadja (background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size). Enako kot pri prelivih CSS.
To je to! Upam, da vam je bila všeč ta tehnika ustvarjanja več ozadij brez uporabe pomožnih elementov. Čista semantična koda.
Če imate kakršna koli vprašanja, komentarje ali predloge o tej tehniki za ustvarjanje več ozadij, napišite v komentarje. Prav tako bi rad testiral za
Naloga
Navzkrižni brskalnik doda dve sliki ozadja za blok.
rešitev
Slike ozadja se precej aktivno uporabljajo za ustvarjanje blokov, saj se z njihovo pomočjo oblikujejo najbolj bizarni modeli. Elementu lahko dodate predvsem okrasne vogale, navpične in vodoravne črte ter še veliko več.
Med brskalniki (to je za vse brskalnike, vključno s starejšimi različicami) ne morete dodati dveh ozadij enemu elementu, zato morate uporabiti trik in ugnezditi en element v drugega. V tem primeru se za vsak ugnezdeni element ustvari lastna slika ozadja, zaradi prekrivanja blokov in ustvari se učinek, da je element samo en in vsebuje več slik ozadja. Pri tem je pomembno, da ne dodate oblazinjenja zunanji elementi, sicer bo učinek izgubljen.
Na primer, razmislite o ustvarjanju navpičnih okrasnih črt levo in desno od bloka. Če želite to narediti, najprej pripravite slike, ki jih je treba ponoviti navpično brez spojev. Na sl. Slika 1 prikazuje sliko ozadja, ki bo uporabljena za prvi element; tvorila bo obrobo na levi strani, na sliki 1. 2 ozadje za ugnezdeni element, ki doda obrobo na desno.
riž. 1. Slika ozadja za obrobo na levi
riž. 2. Slika ozadja za obrobo na desni
Element bloka, ki mu je dodano ozadje, običajno uporablja oznako
Primer 1: Dve sliki ozadja
HTML5 CSS 2.1 IE Cr Op Sa Fx
Prejeto od radijske postaje Cape Chelyuskin 7450 skupin.
Rezultat tega primera je prikazan na sl. 3.
riž. 3. Pogled na blok z dvema slikama ozadja
ki se nahaja znotraj ). Danes bomo govorili malo o drugem zanimiva priložnost
- uporaba več slik v ozadju.
Sestava ozadja
- Obstaja veliko razlogov, zakaj bi sploh želeli sestaviti več slik v ozadju, med katerimi so najpomembnejši:
- prihranek prometa na velikosti slik, če posamezne slike skupaj tehtajo manj kot slika s sploščenimi plastmi in
Lahko so tudi drugi razumni razlogi :)
Zato moramo postaviti več slik ozadja eno na drugo. Kako se običajno reši ta problem? Zelo preprosto: za vsako sliko ozadja se ustvari blok, ki mu je dodeljena ustrezna slika ozadja. Bloki so ugnezdeni drug v drugega ali postavljeni v vrsto z ustreznimi pravili pozicioniranja. Tukaj je preprost primer:
Blok z razredom "ribolov" znotraj "sirena" je samo v predstavitvene namene.
Zdaj pa nekaj stilov:
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing (height:300px; width:480px; position: relative; ) .sample1 .sea (ozadje: url(media/sea.png) repeat-x zgoraj levo; ) .sample1 .mermaid (ozadje: url(media/mermaid.svg) repeat-x spodaj levo; ) .sample1 .fish (ozadje: url(media/fish.svg) no-repeat; height:70px; width:100px; levo : 30px; zgoraj: 90px; položaj: absolutno) .sample1 .fishing (ozadje: url(media/fishing.svg) brez ponavljanja zgoraj desno 10px;)
rezultat: 
V tem primeru so tri ugnezdena ozadja in en blok z ribami, ki se nahaja poleg blokov »ozadje«. Teoretično je mogoče ribe premikati na primer z uporabo prehodov/animacij JavaScript ali CSS3.
Mimogrede, ta primer za ».fishing« uporablja novo sintakso za pozicioniranje v ozadju, ki je prav tako definirana v CSS3:
ozadje: url(media/fishing.svg) brez ponavljanja zgoraj desno 10px;
Trenutno je podprt v IE9+ in Operi 11+, ni pa podprt v Firefoxu 10 in Chromu 16. Tako uporabniki zadnjih dveh brskalnikov še ne bodo mogli loviti ribe.
Več ozadij
Na pomoč priskoči nova možnost, dodana CSS3 – možnost definiranja več slik ozadja za en element. Videti je takole:
In ustrezni slogi:
.sample2 .sea ( višina:300px; širina:480px; položaj: relativno; slika ozadja: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea. png"); položaj ozadja: zgoraj desno 10 slikovnih pik, spodaj levo, zgoraj levo; ponavljanje ozadja: brez ponavljanja, ponavljanje-x, ponavljanje-x ; ) .sample2 .fish (ozadje: url("media/fish.svg) ") brez ponavljanja; višina: 70 slikovnih pik; širina: 100 slikovnih pik; levo: 30 slikovnih pik; zgoraj: 90 slikovnih pik; položaj: absolutno; )
Če želite definirati več slik, morate uporabiti pravilo za slike ozadja, pri čemer navedete posamezne slike, ločene z vejicami. Dodatna pravila, tudi kot seznam, lahko nastavite položaj, ponovitve in druge parametre za vsako sliko. Upoštevajte vrstni red, v katerem so navedene slike: plasti so navedene od leve proti desni od skrajne zgornje do skrajne spodnje.
Rezultat je popolnoma enak: 
Eno pravilo
Če ribe ni treba ločiti v ločen blok za nadaljnje manipulacije, lahko celotno sliko prepišete z enim preprosto pravilo:Slogi:
.sample3 .sea ( višina:300px; širina:480px; položaj: relativno; slika ozadja: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish. svg"), url("media/sea.png"); položaj ozadja: zgoraj desno 10px, spodaj levo, 30px 90px, zgoraj levo; background-repeat: no-repeat, repeat-x ; )
Ne bom pokazal slike rezultata - verjemite mi, sovpada z zgornjima slikama. Toda spet bodite pozorni na sloge, še posebej na "background-repeat" - glede na specifikacijo, če del seznama na koncu manjka, potem mora brskalnik ponoviti navedeni seznam prava številka krat, da ustreza številu slik na seznamu.
V tem primeru je enakovreden temu opisu:
ponavljanje v ozadju: brez ponavljanja, ponavljanje-x, no-repeat, repeat-x;
Še krajše
Če se spomnite CSS 2.1, je definiral možnost opisovanja slik ozadja v kratki obliki. Kaj pa več slik? To je tudi možno:Sample4 .sea ( višina:300px; širina:480px; položaj: relativno; ozadje: url("media/fishing.svg") zgoraj desno 10px brez ponavljanja, url("media/mermaid.svg") spodaj levo ponovitev-x , url("media/fish.svg") 30px 90px brez ponavljanja, url("media/sea.png") repeat-x )
Vendar upoštevajte, da zdaj ne morete preprosto preskočiti vrednosti (razen če se ujemajo s privzeto vrednostjo). Mimogrede, če želite nastaviti barvo slike ozadja, morate to narediti v zadnjem sloju.
Dinamične slike
Če je kompozicija statična ali največ dinamična, odvisno od velikosti vsebnika, potem več ozadij očitno poenostavi oblikovanje strani. Kaj pa, če morate delati s posameznimi elementi kompozicije neodvisno od javascripta (premikati, drsiti itd.)?Mimogrede, tukaj je primer iz življenja - tema z regratom v Yandexu:
Če pogledate v kodo, boste videli nekaj takega:
...Bloki z razredi "b-fluff-bg", "b-fluff__cloud" in "b-fluff__item" vsebujejo slike ozadja, ki se prekrivajo. Poleg tega se ozadje z oblaki nenehno premika, regrat pa leti po zaslonu.
Ali je to mogoče prepisati z uporabo več ozadij? Načeloma da, vendar pod pogojem 1) podpore za to funkcijo v ciljnih brskalnikih in ... 2) berite dalje;)
Kako dodati dinamiko več ozadjem? V takšni situaciji se izkaže za priročno, da brskalnik v notranji predstavitvi razdeli posamezne parametre slik ozadja v skladu z ustreznimi pravili. Na primer, za pozicioniranje je "background-position", za premike pa je dovolj, da spremenite samo to. Vendar pa obstaja strošek za uporabo več slik - to pravilo (in katero koli podobno) zahteva, da navedete položaj za vsa ozadja, definirana za vaš blok, in tega ne morete narediti selektivno.
Če želite našemu ribjemu ozadju dodati animacijo, lahko uporabite naslednjo kodo:
$(document).ready(function() ( var sea = $(".sample5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var mermaidX = 0; var t = 0; funkcija animationLoop() ( fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX< 0) fishesX = 480;
mermaidX += 0.5;
if(mermaidX >480) morska deklica X = 0;
fishY = -10 + (10 * Math.cos(t * 0,091));
fishX = 10 + (5 * Math.sin(t * 0,07));
sea.style.backgroundPosition = "zgoraj" + fishY + "px desno" + fishX + "px, " + sirenaX + "px spodaj," + fishesX + "px" + fishesY + "px, zgoraj levo";
window.requestAnimFrame(animationLoop);
) animationLoop(); ));kje
Sea.style.backgroundPosition = "zgoraj" + fishY + "px desno" + fishX + "px, " + sirenaX + "px spodaj," + fishesX + "px" + fishesY + "px, zgoraj levo";
Prepričan sem, da je to mogoče zaviti v priročno javascript kodo, ki bo poskrbela za virtualizacijo odnosov s posameznimi sloji, pri tem pa pustila čim bolj čisto html kodo strani.
Kaj pa združljivost?
Vse sodobne različice priljubljenih brskalnikov, vključno z IE9+, podpirajo več slik (lahko preverite na primer Caniuse).Modernizr lahko uporabite tudi za zagotavljanje alternativnih rešitev za brskalnike, ki ne podpirajo več ozadij. Kot je zapisal Chris Coyier v svoji objavi o vrstnem redu plasti pri uporabi več ozadij, naredite nekaj takega:
Telo Multiplebgs ( /* Izjemne izjave več BG, ki presegajo realnost in imsourcess chicks */) .no-multiplebgs body ( /* laaaaaame backback */)
Če ste zmedeni glede uporabe JS za zagotavljanje združljivost za nazaj, lahko preprosto dvakrat razglasite ozadje, vendar ima to tudi svoje slabosti v obliki možnih dvojni zagon viri (to je odvisno od implementacije obdelave css v določenem brskalniku):
/* več nadomestnih bg */ ozadje: #000 url(...) ...; /* Čudovite izjave več BG, ki presegajo resničnost in nenavadne ženske */ url ozadja(...), url(...), url(...), #000 url(...);
Če ste že začeli razmišljati o sistemu Windows 8, ne pozabite, da lahko pri razvoju aplikacij v slogu metro uporabite več ozadij, saj uporablja isti motor kot IE10.
P.s. O temi: Ne morem si kaj, da se ne bi spomnil fenomenalnega članka o
Naloga
Dodajte dve sliki ozadja v blok z uporabo CSS3.
rešitev
Sodobni brskalniki vam omogočajo, da elementu dodate poljubno število slik ozadja, pri čemer navedete parametre vsakega ozadja, ločene z vejicami. Dovolj je, da uporabite lastnost univerzalnega ozadja in najprej določite eno ozadje in drugo, ločeno z vejico.
Na primer, razmislite o ustvarjanju navpičnih okrasnih črt na levi in desni strani bloka. Če želite to narediti, najprej pripravite slike, ki jih je treba ponoviti navpično brez spojev. Na sl. 1 prikazuje sliko ozadja, ki bo prikazana na levem robu, na sl. 2 slika za prikaz na desnem robu.
riž. 1. Slika ozadja za obrobo na levi
riž. 2. Slika ozadja za obrobo na desni
Element bloka, ki mu je dodano ozadje, običajno uporablja oznako
Primer 1: Dve sliki ozadja
HTML5 CSS3 IE Cr Op Sa Fx
Prejeto od radijske postaje Cape Chelyuskin 7450 skupin.
Enemu elementu lahko hkrati dodate več slik ozadja prek ene lastnosti ozadja. To vam omogoča, da z enim elementom ustvarite kompleksno ozadje ali eno sliko, ki jo večkrat prikažete z različnimi nastavitvami. Vse slike s svojimi parametri so navedene ločene z vejicami, pri čemer je prva prikazana slika, ki je prikazana na vrhu drugih slik, zadnja pa najnižja slika. Primer 1 prikazuje, kako ustvariti ozadje s tremi slikami.
Primer 1. Tri ozadja
Če morate ločeno nastaviti neko lastnost sloga za ozadje, na primer velikost ozadja, kot v zgornjem primeru, potem so parametri za vsako ozadje navedeni ločeni z vejicami. Rezultat tega primera je prikazan na sl. 1.
riž. 1. Ozadje s tremi slikami
Posamezne slike ozadja vam omogočajo, da spremenite njihov položaj in jih tudi animirate, kot je prikazano v primeru 2.
Primer 2: Animirano ozadje
Poglejmo zdaj, kako uporabiti eno sliko za ustvarjanje bloka z okvirjem (slika 2). Širina bloka je fiksna, višina pa se spreminja glede na prostornino vsebine bloka.
riž. 2. Ročno narisan okvir
Slika jasno prikazuje zgornje in spodnje dele, ki jih je treba izrezati grafični urejevalnik in ga postavite vodoravno. Srednji del je izbran tako, da se ponavlja navpično brez šivov. Slika ima izrazit ponavljajoč se vzorec, zato ne bi smelo biti težav pri poudarjanju. Rezultat bo pripravljena slika (slika 3). Karirasto polje označuje prosojnost; omogoča vam, da skupaj s slikami nastavite barvno ozadje in ga preprosto spremenite s pomočjo slogov.
riž. 3. Slika pripravljena za ozadje
Samo ozadje je prikazano z lastnostjo ozadja, ki podaja tudi koordinate želenega fragmenta. Parametri vsakega ozadja so navedeni ločeno z vejicami in v tem primeru je njihov vrstni red pomemben. Želimo, da se zgornji in spodnji del bloka ne prekrivata, zato ju postavimo na prvo mesto (primer 3). Barva ozadja je navedena nazadnje.
Primer 3. Več slik za ozadje
Huitzilopochtli - "čarovnik kolibrija", bog vojne in sonca.
Tezcatlipoca - "kadeče se ogledalo", glavni bog Aztekov.
Človeške žrtve so bile dane obema bogovoma.
Prvo ozadje prikazuje zgornjo mejo bloka, drugo ozadje - dno in tretje - navpične meje. Zadnja barva je tista, ki je vidna v prozornem osrednjem delu bloka (slika 4).
Pregled
