Leo, karibu kila muundo wa tovuti una picha nzuri ya mandharinyuma.

Kila mtengenezaji wa mpangilio anajua kwamba njia rahisi zaidi ya kuunda muundo ni bora zaidi ambayo inaweza kuwa. Mojawapo ya mbinu rahisi na rahisi ni kutumia mistari michache ya msimbo wa CSS.

Inaweza kuonekana kama kitu kidogo, lakini bado, wakati mwingine unahitaji kuunda kitu ngumu kwa njia rahisi. Kwa mfano, tumia asili kadhaa na vigezo vya mtu binafsi, bila kutumia vizuizi vya ziada vya div. Hiyo ni, kuokoa.

Katika makala haya, tutaangalia syntax ya msimbo ambayo inasaidia asili nyingi katika kipengele kimoja. Hivi ndivyo inavyoonekana katika maisha halisi:

Msimbo wa CSS kwa asili nyingi

Picha nyingi za mandharinyuma hutekelezwa kwa kutumia thamani nyingi za parameta ya mandharinyuma ya css, ambayo hutenganishwa na kukosa fahamu:

#multipleBGs ( mandharinyuma: url(picha1.png), url(photo2.png), url(photo3.png) ; kurudia-rudia: hakuna kurudia, hakuna kurudia, kurudia-y; nafasi ya usuli: 0 0, 30px 70px, juu kulia; upana: 400px; urefu: 400px; mpaka: 1px imara #ccc; )

Nilijaribu kufanya vivyo hivyo na nambari fupi. Kwa bahati mbaya, haifanyi kazi.

Pia, unaweza kutumia sifa zingine za usuli (kiambatisho cha usuli, klipu ya usuli, taswira ya usuli, asili ya usuli, nafasi ya usuli, kurudia-rudia, ukubwa wa usuli). Sawa na gradient za CSS.

Ni hayo tu! Natumaini ulipenda mbinu hii ya kuunda asili nyingi, bila kutumia vipengele vyovyote vya msaidizi. Msimbo safi wa semantiki.

Ikiwa una maswali, maoni au mapendekezo kuhusu mbinu hii ya kuunda asili nyingi, andika kwenye maoni. Pia, ningependa kupima

Tulipozungumza kuhusu sifa ya picha ya mandhari-nyuma mwanzoni mwa sehemu hii, hatukutaja kipengele kimoja: katika CSS3, unaweza kuongeza usuli nyingi kwa kipengele kimoja kwa kuorodhesha tu zikitenganishwa na koma. Hii ni muhimu hasa wakati kipengele kilicho na historia kina upana wa kutofautiana au urefu, na mandharinyuma lazima iendane na saizi yake.

Jinsi ya Kuweka Asili Nyingi katika CSS

Tutakuonyesha mfano ambao unaweza kuwa muhimu katika mazoezi. Wacha tufikirie kuwa tunahitaji kuweka kizuizi cha maandishi kwenye fremu. Sura ni faili ya picha katika umbizo la PNG:

Katika tatizo hili, urefu wa maandishi haujulikani kwetu - hatujui ikiwa maandishi yatafaa kabisa ndani ya fremu au kwenda zaidi yake. Kwa sababu ya idadi hii isiyojulikana, hatuwezi kuhatarisha kutumia muundo asili wa fremu kama usuli. Lakini kwa CSS tunaweza kupanua mpaka huu inapohitajika. Ili kufanya hivyo, itabidi ugawanye mchoro wa asili katika mhariri wa picha katika sehemu tatu - juu, chini na katikati - na uhifadhi kila faili tofauti. Kama hii:

Juu ya sura

Chini ya sura

Katikati ya sura

Tutafanya mandharinyuma na picha ya katikati ya sura inayorudia kwenye mhimili Y, wakati sehemu ya juu na chini ya fremu haitarudiwa. Wacha tuongeze asili zote tatu kwenye kipengee, na pia tuandike mitindo mingine muhimu:

Fremu ( picha ya usuli: url(https://goo.gl/tKyzHt), /* juu ya fremu */ url(https://goo.gl/SUKymM), /* chini ya fremu */ url( https: //goo.gl/Km7HVV); /* katikati ya fremu */ nafasi ya usuli: juu katikati, /* nafasi ya juu ya fremu */ chini katikati, /* nafasi ya chini ya fremu * / katikati ya juu; /* nafasi ya katikati ya fremu */ mandharinyuma -rudia: hakuna kurudia, /* sehemu ya juu ya fremu hairudiwi */ hakuna kurudia, /* chini ya fremu hairudiwi * / repeat-y; /* katikati ya fremu inarudiwa wima */ background-size: contain; /* hapa kwa asili zote zina thamani sawa */ urefu: otomatiki; /* urefu wa kizuizi hutegemea kiasi cha maudhui * / upana: 400px; /* upana wa kizuizi umewekwa */ pedi: 30px; /* zuia pedi za ndani */ )

Kila mandharinyuma lazima itenganishwe kwa koma, na ni baada ya ya mwisho tu ndipo nusu-koloni iliyowekwa ili kuonyesha mwisho wa tamko. Kwa urahisi na usomaji bora wa msimbo, tunapendekeza ubainishe kila URL kwenye mstari mpya.

Picha za asili zimewekwa kulingana na kanuni ya tabaka - moja chini ya nyingine. Asili iliyoainishwa kwanza itakuwa kwenye safu ya juu, ya pili itakuwa chini ya ya kwanza, na ya tatu itakuwa chini ya mbili za kwanza. Ndiyo sababu tuliweka picha na katikati ya sura mwishoni kabisa - ili isiingie sehemu za juu na za chini.

Ifuatayo, msimbo huweka sifa za mandharinyuma-nafasi-ya-chinichini kwa kila usuli (mpangilio sawa ambao picha za usuli zimepangwa). Ndio, ulikisia sawa: ikiwa inahitajika, basi unaweza kutaja maadili ya mali zingine za nyuma, zilizotengwa na koma. Na ikiwa unahitaji kutumia thamani moja kwa asili zote, unaiandika kama kawaida (kwa upande wetu, saizi ya usuli: ina mali).

Kweli, wacha tuangalie matokeo:

Kama unaweza kuona, sura imewekwa kwa usahihi, na sasa inaangazia yaliyomo kwenye kizuizi. Nini kinatokea ikiwa tunaongeza kiasi cha maandishi kwenye kizuizi? Hebu tuangalie:

Sehemu ya kati ya fremu yetu ilinakiliwa kiwima nambari inayohitajika ya nyakati, kana kwamba inanyoosha kwa urefu na kurekebisha maandishi. Hii ndio athari ambayo haikuweza kupatikana ikiwa tungetumia picha thabiti ya fremu. Wacha tuongeze maandishi zaidi kwa uwazi:

Bila shaka, asili nyingi zinaweza kutumika kutatua matatizo mengine. Tulionyesha mfano mmoja tu kati ya mingi. Jaribu kuja na hali yako mwenyewe na ujizoeze kutumia kikundi cha picha za mandharinyuma.

Kwa kutumia nukuu ya mkato

Sifa ya usuli pia inakubali thamani nyingi. Katika kesi ya kutumia asili kadhaa, rekodi iliyofupishwa inaweza kuwa rahisi zaidi, kwa sababu ni ngumu zaidi kuchanganyikiwa. Wacha tufanye upya nambari yetu ya sura:

Mandharinyuma: url(https://goo.gl/tKyzHt) juu katikati / haina marudio, /* juu ya fremu */ url(https://goo.gl/SUKymM) chini katikati / haina marudio, / * sehemu ya chini ya fremu */ url(https://goo.gl/Km7HVV) sehemu ya juu ya katikati / ina marudio-y; /* katikati ya fremu */

Chaguo hili linaonekana kuwa gumu na ni rahisi kuelewa.

Unaweza kuongeza picha nyingi za mandharinyuma kwenye kipengele kimoja mara moja kupitia kipengele kimoja cha usuli. Hii inakuwezesha kutumia kipengele kimoja ili kuunda historia ngumu au picha moja, kuionyesha mara kadhaa na mipangilio tofauti. Picha zote zilizo na vigezo vyake zimeorodheshwa zikitenganishwa na koma, na picha inayoonyeshwa juu ya picha zingine imeonyeshwa kwanza, na ya mwisho, kwa mtiririko huo, picha ya chini kabisa. Mfano wa 1 unaonyesha jinsi ya kuunda usuli na picha tatu.

Mfano 1. Asili tatu

Iwapo unahitaji kuweka kipengee muundo fulani wa mandharinyuma, kama ukubwa wa usuli kama ilivyo kwenye mfano hapo juu, basi vigezo vya kila usuli vimeorodheshwa vikitenganishwa na koma. Matokeo ya mfano huu yanaonyeshwa kwenye Mtini. 1.

Mchele. 1. Mandharinyuma yenye picha tatu

Picha za mandharinyuma za kibinafsi hukuruhusu kubadilisha msimamo wao na pia kuzihuisha, kama inavyoonyeshwa katika mfano 2.

Mfano 2: Mandharinyuma yaliyohuishwa

Hebu sasa fikiria jinsi ya kutumia picha moja ili kuunda block na sura (Mchoro 2). Upana wa block ni fasta, na urefu hutofautiana kulingana na kiasi cha yaliyomo ya block.

Mchele. 2. Sura iliyochorwa kwa mkono

Takwimu inaonyesha wazi sehemu za juu na za chini, ambazo zinahitaji kukatwa kwenye mhariri wa graphics na kuwekwa kwa usawa. Sehemu ya kati imechaguliwa ili kurudiwa kwa wima bila seams. Picha ina muundo uliotamkwa wa kurudia, kwa hivyo haipaswi kuwa na ugumu katika kuangazia. Matokeo yatakuwa picha iliyoandaliwa (Mchoro 3). Sehemu iliyotiwa alama inaonyesha uwazi; hukuruhusu kuweka mandharinyuma ya rangi pamoja na picha na kuibadilisha kwa urahisi kupitia mitindo.

Mchele. 3. Picha iliyotayarishwa kwa mandharinyuma

Asili yenyewe inaonyeshwa na mali ya nyuma, ambayo pia inabainisha kuratibu za kipande kinachohitajika. Vigezo vya kila mandharinyuma vimeorodheshwa vikitenganishwa na koma, na katika kesi hii mpangilio wao ni muhimu. Tunataka sehemu ya juu na ya chini ya kizuizi isiingiliane, kwa hivyo tunaweka kwanza (mfano 3). Rangi ya mandharinyuma imebainishwa mwisho.

Mfano 3. Picha kadhaa za mandharinyuma

Asili ya kwanza inaonyesha mpaka wa juu wa kizuizi, msingi wa pili - chini, na wa tatu - mipaka ya wima. Ya mwisho ni rangi inayoonekana katika sehemu ya kati ya uwazi ya block (Mchoro 4).

Leo tutafanya kazi kwenye picha za mandharinyuma, ambazo zimewekwa kwa kutumia mali ya nyuma na maadili yake ya ziada. Wacha tuangalie mifano michache ya vitendo ya kusanikisha asili nyingi kwa kitu kimoja.

Hii inaweza kuwa na manufaa katika matukio mengi na wakati. Hasa matumizi ya vipengele vya pseudo katika kesi hii, kwa kuwa ni rahisi sana katika vigezo.

Picha nyingi za mandharinyuma

Ili sio kuunda kizuizi ndani ya kizuizi, njia rahisi ni kuongeza mstari mmoja wa sheria kwenye kipengele kikuu na hivyo kupata matokeo yaliyohitajika. Tunaweza kuzingatia chaguo hili la lakoni, hasa kwa vile huondoa haja ya kwenda tena kwenye msimbo wa chanzo. Kila kitu kitafanywa kwa kutumia CSS pekee.

Blockimg( usuli: url("img/img2.png"),/*chinichini ya juu kabisa na kisha mfululizo*/ url("img/img3.png"), url("img/img1.jpg"); nafasi ya usuli : kituo cha 370px, 120px 150px, katikati;/*nafasi ya picha*/ kurudia-rudia: hakuna kurudia;/*rudia picha*/ rangi ya usuli: #444;/*ikiwa rangi ya mandharinyuma inahitajika*/ kivuli-kisanduku: 0 1px 2px rgba(0, 0, 0, 0.1); ukingo: 100px otomatiki 15px; ukubwa wa kisanduku: kisanduku cha mpaka; pedi: 25px; upana:700px; urefu mdogo: 300px; ) /*toleo lililofupishwa*/ . blockimg ( mandharinyuma: url("img/img2.png") hakuna kurudia kituo cha 370px, url("img/img3.png") hakuna kurudia 120px 150px, url("img/img1.jpg") kituo cha kutorudia katikati; ukingo: 100px otomatiki 15px; ukubwa wa kisanduku: kisanduku cha mpaka; pedi: 25px; upana:700px; urefu wa chini: 300px;)

Maelezo. Tunatoa kipengee picha ya mandharinyuma, inayoonyesha njia ya eneo lake. Tukitenganishwa na koma, tunapewa fursa ya kuingiza usuli nyingi zaidi, kama inavyoonekana katika msimbo ulio hapo juu. Mpangilio wa nambari zao huamua ni picha gani itakuwa juu ya wengine. Hiyo ni, historia ya kwanza ni ya juu zaidi kuliko wengine wote, na kisha mlolongo hufuata kanuni ya mhariri wa kawaida wa graphic.

Ifuatayo, vigezo vya ziada vinatajwa kupitia mali ya mtu binafsi: nafasi, kurudia, ukubwa, na, ikiwa ni lazima, rangi. Tafadhali pia kumbuka kuwa vigezo vyote vimeandikwa kutengwa na koma, kwa mpangilio sawa na nambari ya picha.

Na maelezo ya mwisho. Nambari nzima inaweza kufupishwa kwa kutumia mali moja tu ya jumla, mandharinyuma . Kuna chaguo la pili katika mfano wa nambari inayoonyesha jinsi hii inafanywa.

Picha ya usuli kupitia kipengele bandia

Pia, usisahau kuhusu chaguzi mbadala, kama vile vipengele vya kabla na baada ya pseudo. Kuna faida nzuri katika matumizi yao - picha inaweza kuhamishwa zaidi ya makali ya kipengele, ili isipotee kwenye mpaka, lakini iko juu yake. Mbinu hii itakusaidia ikiwa unahitaji kuunda kitu kama athari ya 3D.

Blockimg( usuli: url("img/img1.jpg") hakuna kurudia;/*mandharinyuma ya kipengele*/ nafasi:jamaa;/*eneo la kuweka*/ ukingo: 200px otomatiki 15px; ukubwa wa kisanduku: kisanduku cha mpaka; pedi: 25px; upana:700px; urefu mdogo: 300px; ) .blockimg::kabla (chinichini: url("img/img1.png") kituo cha katikati kisichorudiwa; chini: 0; maudhui: ""; urefu: 295px; kushoto: 0; nafasi: kabisa;/*nafasi kamili*/ kulia: 0; juu: -150px; )

Maelezo. Kwa kweli, kila kitu ni rahisi sana. Tunaweka historia kwa kipengele kikuu kwa njia ya kawaida. Inayofuata inakuja nafasi muhimu ya mali: jamaa; , ambayo inafafanua eneo la kusonga kipengele kingine kilicho katika kipengele kikuu na kina nafasi ya mali:kabisa; .

Badala ya kipengele kingine, ingawa rasmi huenda kama eneo tofauti, tunatumia kipengele cha upendeleo. Tunampa nafasi kamili na kuiweka mahali tunapohitaji.

) Leo tutazungumza kidogo kuhusu kipengele kingine cha kuvutia - kutumia picha nyingi nyuma.

Muundo wa usuli

Kuna sababu nyingi kwa nini unaweza kutaka kutunga picha nyingi chinichini hata kidogo, muhimu zaidi kati ya hizo ni:

• kuokoa trafiki kwenye saizi ya picha, ikiwa picha za mtu binafsi zina uzito mdogo kwa jumla kuliko picha iliyo na tabaka bapa, na
• hitaji la tabia ya kujitegemea ya tabaka za mtu binafsi, kwa mfano, wakati wa kutekeleza athari za parallax.

Kunaweza kuwa na sababu zingine nzuri :)

Mbinu ya classic

Kwa hivyo tunahitaji kuweka picha kadhaa za mandharinyuma moja juu ya nyingine. Tatizo hili hutatuliwaje kwa kawaida? Ni rahisi sana: kwa kila picha ya nyuma, kizuizi kinaundwa, ambacho picha ya mandharinyuma inayolingana inapewa. Vitalu huwekwa ndani ya kila kimoja au kuwekwa kwa safu kwa sheria zinazofaa za uwekaji. Hapa kuna mfano rahisi:

Sehemu iliyo na darasa la "uvuvi" ndani ya "nguva" ni kwa madhumuni ya maonyesho tu.

Sasa baadhi ya mitindo:
.sampuli1 .bahari, .sampuli1 . nguva, .sampuli1 .uvuvi ( urefu:300px; upana:480px; nafasi: jamaa; ) .sampuli1 .sea ( usuli: url(media/sea.png) repeat-x juu kushoto;) .sample1 .mermaid ( mandharinyuma: url(media/mermaid.svg) repeat-x chini kushoto; ) .sampuli1 .samaki ( usuli: url(media/fish.svg) hakuna kurudia; urefu:70px; upana:100px; kushoto : 30px; juu: 90px; nafasi: kabisa; ) .sampuli1 .uvuvi ( usuli: url(media/fishing.svg) hakuna kurudia juu kulia 10px;)

Matokeo:

Katika mfano huu, kuna asili tatu zilizowekwa na kizuizi kimoja na samaki kilicho karibu na vitalu vya "background". Kwa nadharia, samaki wanaweza kuhamishwa, kwa mfano, kwa kutumia JavaScript au CSS3 Transitions/Animations.

Kwa njia, mfano huu wa ".fishing" hutumia sintaksia mpya kwa uwekaji wa mandharinyuma, pia iliyofafanuliwa katika CSS3:
mandharinyuma: url(media/fishing.svg) hakuna kurudia juu kulia 10px;
Kwa sasa inatumika katika IE9+ na Opera 11+, lakini haitumiki katika Firefox 10 na Chrome 16. Kwa hivyo watumiaji wa vivinjari viwili vya mwisho hawataweza kupata samaki bado.

Asili nyingi

Chaguo jipya lililoongezwa kwa CSS3 litasaidia - uwezo wa kufafanua picha nyingi za mandharinyuma kwa kipengele kimoja. Inaonekana kama hii:

Na mitindo inayolingana:
.sampuli2 .sea ( urefu:300px; upana:480px; nafasi: jamaa; picha ya usuli: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea. png"); nafasi ya usuli: juu kulia 10px, chini kushoto, juu kushoto; kurudia-chini: hakuna-rudia, rudia-x, rudia-x ; ) .sample2 .samaki ( usuli: url("media/fish.svg ") hakuna kurudia; urefu:70px; upana:100px; kushoto: 30px; juu: 90px; nafasi: kabisa;)
Ili kufafanua picha nyingi, lazima utumie sheria ya picha ya mandharinyuma, kuorodhesha picha mahususi zilizotenganishwa na koma. Sheria za ziada, pia orodha, zinaweza kuweka nafasi, marudio na vigezo vingine kwa kila picha. Kumbuka mpangilio ambao picha zimeorodheshwa: safu zimeorodheshwa kutoka kushoto kwenda kulia kutoka juu kabisa hadi chini kabisa.

Matokeo yake ni sawa kabisa:

Kanuni moja

Ikiwa samaki haitaji kutengwa kwa kizuizi tofauti kwa udanganyifu unaofuata, picha nzima inaweza kuandikwa tena na sheria moja rahisi:

Mitindo:
.sampuli3 .sea ( urefu:300px; upana:480px; nafasi: jamaa; picha ya usuli: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish. svg"), url("media/sea.png"); nafasi ya usuli: juu kulia 10px, chini kushoto, 30px 90px, juu kushoto; kurudia-chini: hakuna-rudia, rudia-x ; )

Sitaonyesha picha ya matokeo - niamini, inafanana na picha mbili hapo juu. Lakini makini na mitindo tena, haswa "kurudia-msingi" - kulingana na maelezo, ikiwa sehemu ya orodha mwishoni haipo, basi kivinjari lazima kirudie orodha iliyoainishwa idadi inayotakiwa ya nyakati ili kuendana na idadi ya picha katika orodha.

Katika kesi hii, ni sawa na maelezo haya:
kurudia-rudia: hakuna kurudia, kurudia-x, hakuna kurudia, kurudia-x;

Hata mfupi zaidi

Ikiwa unakumbuka CSS 2.1, ilifafanua uwezo wa kuelezea picha za mandharinyuma kwa ufupi. Vipi kuhusu picha nyingi? Hii pia inawezekana:

Sampuli4 .sea ( urefu:300px; upana:480px; nafasi: jamaa; usuli: url("media/fishing.svg") juu kulia 10px no-repeat, url("media/mermaid.svg") chini kushoto kurudia-x , url("media/fish.svg") 30px 90px no-repeat, url("media/sea.png") repeat-x; )

Lakini kumbuka kuwa sasa huwezi tu kuruka maadili (isipokuwa yanalingana na dhamana ya msingi). Kwa njia, ikiwa unataka kuweka rangi ya picha ya nyuma, hii lazima ifanyike kwenye safu ya mwisho sana.

Picha zenye nguvu

Ikiwa utunzi ni tuli au unaobadilika zaidi kulingana na saizi ya kontena, basi asili nyingi hurahisisha muundo wa ukurasa. Lakini vipi ikiwa unahitaji kufanya kazi na vipengele vya mtu binafsi vya utunzi kwa kujitegemea kutoka kwa javascript (sogeza, tembeza, nk)?

Kwa njia, hapa kuna mfano kutoka kwa maisha - mada na dandelion katika Yandex:


Ukiangalia nambari, utaona kitu kama hiki:

...

Vitalu vyenye madarasa "b-fluff-bg", "b-fluff__cloud" na "b-fluff__item" vina picha za usuli zinazopishana. Kwa kuongezea, mandharinyuma iliyo na mawingu husonga kila wakati, na dandelions huruka kwenye skrini.

Je, hii inaweza kuandikwa upya kwa kutumia usuli nyingi? Kimsingi, ndio, lakini kulingana na 1) usaidizi wa kipengele hiki kwenye vivinjari lengwa na... 2) soma kuendelea;)

Jinsi ya kuongeza mienendo kwa asili nyingi? Katika hali hiyo, inageuka kuwa rahisi kuwa katika uwakilishi wa ndani kivinjari kinasambaza vigezo vya mtu binafsi vya picha za nyuma kulingana na sheria zinazofaa. Kwa mfano, kwa nafasi kuna "background-position", na kwa mabadiliko ni ya kutosha kubadili hii tu. Walakini, kuna gharama ya kutumia picha nyingi - sheria hii (na yoyote inayofanana) inahitaji uorodheshe nafasi kwa asili zote zilizoainishwa kwa kizuizi chako, na huwezi kufanya hivi kwa kuchagua.

Ili kuongeza uhuishaji kwenye usuli wetu wa samaki, unaweza kutumia msimbo ufuatao:
$(hati).tayari(kazi() ( var sea = $(".sampuli5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var mermaidX = 0; var t = 0; uhuishaji wa kitendakaziLoop() ( fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) nguvaX = 0; samakiY = -10 + (10 * Math.cos (t * 0.091)); samakiX = 10 + (5 * Math.sin (t * 0.07)); sea.style.backgroundPosition = "juu " + fishY + "px kulia " + fishX + "px, " + nguvaX + "px chini," + fishesX + "px " + fishesY + "px, juu kushoto"; window.requestAnimFrame(animationLoop); ) Kitanzi cha uhuishaji(); ));
Wapi
window.requestAnimFrame = (kazi() ( rudi window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (kazi(kazi(callback.0) (callback 0 window0) );))))();

Na kwa njia, uhuishaji pia unaweza kufanywa kwa kutumia Mpito/Uhuishaji wa CSS3, lakini hii ni mada ya mjadala tofauti.

Parallax na mwingiliano

Hatimaye, ujanja kama huo unaweza kuongeza athari za parallax kwa urahisi au mwingiliano wa mwingiliano na usuli:

Picha nyingi za mandharinyuma ni muhimu katika hali kama hizi, kwani tunapozungumza tu kuhusu mandharinyuma (na si maudhui), matumizi yake huturuhusu kuepuka kutupa uchafu msimbo wa html na DOM. Lakini kila kitu huja kwa bei: Siwezi kufikia vipengele vya utunzi wa mtu binafsi kwa jina, kitambulisho, darasa au kigezo kingine chochote. Lazima nikumbuke wazi mpangilio wa vitu katika muundo katika nambari, na kwa kila mabadiliko katika paramu yoyote ya kitu chochote, kwa kweli, lazima niunganishe pamoja mstari unaoelezea maadili ya paramu hii kwa vitu vyote na kuisasisha kwa muundo mzima.

Sea.style.backgroundPosition = "juu " + fishY + "px kulia " + fishX + "px, " + nguvaX + "px chini," + fishesX + "px " + fishesY + "px, juu kushoto";

Nina hakika kuwa hii inaweza kufungwa kwa msimbo unaofaa wa javascript, ambayo itashughulikia uboreshaji wa uhusiano na tabaka za mtu binafsi, huku ikiacha msimbo wa html wa ukurasa kuwa safi iwezekanavyo.

Vipi kuhusu utangamano?

Matoleo yote ya kisasa ya vivinjari maarufu, ikiwa ni pamoja na IE9 +, inasaidia picha nyingi (unaweza kuangalia, kwa mfano, Caniuse).

Unaweza pia kutumia Modernizr kutoa suluhu mbadala kwa vivinjari ambavyo havitumii usuli nyingi. Kama Chris Coyier aliandika katika chapisho lake juu ya mpangilio wa safu wakati wa kutumia asili nyingi, fanya kitu kama hiki:

Multiplebgs body ( /* Matamko ya kushangaza ya BG mengi ambayo yanavuka uhalisia na kuwapoteza vifaranga */ ) .no-multiplebgs mwili ( /* laaaaaame fallback */ )
Ikiwa unajali juu ya kutumia JS kutoa utangamano wa nyuma, unaweza kutangaza msingi mara mbili, ingawa hii pia ina shida zake katika mfumo wa upakiaji wa rasilimali mara mbili (hii inategemea utekelezaji wa usindikaji wa css kwenye kivinjari fulani):

/* nyingi bg fallback */ background: #000 url(...) ...; /* Matamko ya kustaajabisha ya BG ambayo yanavuka uhalisia na upotevu wa vifaranga */ url ya usuli(...), url(...), url(...), #000 url(...);

Ikiwa tayari umeanza kufikiria Windows 8, kumbuka kuwa unaweza kutumia asili nyingi wakati wa kutengeneza programu za mtindo wa metro, kwani hutumia injini sawa na IE10.

P.s. Juu ya mada: Siwezi kujizuia kukumbuka makala ya ajabu kuhusu