Bitta elementga ikkita fon rasmini qanday qo'shishim mumkin? CSS2 yordamida bir nechta fon rasmlari va zarbalar CSS-ga bir nechta fon rasmlarini kiritish.

Bugun biz fon xususiyati va uning ixtiyoriy qiymatlari yordamida o'rnatiladigan fon tasvirlari ustida ishlaymiz. Keling, bir xil elementga bir nechta fonni o'rnatishni amalga oshirishda bir nechta amaliy misollarni ko'rib chiqaylik.

Bu ko'p hollarda va daqiqalarda foydali bo'lishi mumkin. Ayniqsa, bu holda psevdo-elementlardan foydalanish, chunki ular parametrlarda juda moslashuvchan.

Ko'p fon rasmlari

Blok ichida blok yaratmaslik uchun, eng oson yo'li - asosiy elementga bir qator qoidalar qo'shish va shu bilan kerakli natijani olish. Buni lakonik variantlar deb hisoblash mumkin, bundan tashqari, sizni ko'tarilish zaruratidan xalos qiladi manba kodi... Hamma narsa faqat CSS bilan amalga oshiriladi.

Blockimg (fon: url ("img / img2.png"), / * eng yuqori fon va keyin ketma-ket * / url ("img / img3.png"), url ("img / img1.jpg"); fon pozitsiyasi : 370px markaz, 120px 150px, markaziy markaz; / * tasvirlarning joylashuvi * / fon-takrorlash: takrorlanmaslik; / * tasvirni takrorlash * / fon rangi: # 444; / * fon rangi kerak bo'lsa * / quti soyasi : 0 1px 2px rgba (0, 0, 0, 0.1); hoshiya: 100px avtomatik 15px; quti oʻlchami: chegara qutisi; toʻldirish: 25px; kenglik: 700px; min-balandlik: 300px;) / * stenografiya * / . blockimg (fon: url ("img / img2.png") takrorlanmaydigan 370px markaz, url ("img / img3.png") takrorlanmaydigan 120px 150px, url ("img / img1.jpg") takrorlanmaydigan markaz markaz; chekka: 100px avtomatik 15px; quti oʻlchami: chegara qutisi; toʻldirish: 25px; kenglik: 700px; minimal balandlik: 300px;)

Tushuntirish. Elementga uning joylashgan joyiga yo'lni ko'rsatuvchi fon tasvirini bering. Yuqoridagi kodda ko'rib turganingizdek, vergul bilan ajratilgan holda bizga yana ko'plab fonlarni yozish imkoniyati beriladi. Ularning sonining tartibi qaysi rasm boshqalarning tepasida bo'lishini aniqlaydi. Ya'ni, birinchi fon boshqalardan ustundir, keyin esa ketma-ketlik an'anaviy grafik muharrir printsipiga amal qiladi.

Undan keyin keladi Qo'shimcha variantlar individual xususiyatlar orqali: pozitsiya, takrorlash, o'lcham, agar kerak bo'lsa, keyin boshqa rang. Shuningdek, barcha parametrlar vergul bilan ajratilgan holda, rasm raqami bilan bir xil tartibda yozilganligiga e'tibor qaratamiz.

Va oxirgi tafsilot. Barcha kodni faqat bitta umumiy fon xususiyatidan foydalangan holda qisqartirish mumkin. Kod misolida bu qanday amalga oshirilganligini ko'rsatadigan ikkinchi variant mavjud.

Pseudo-element orqali fon tasviri

Bundan tashqari, unutmang muqobil variantlar xuddi shunday psevdo-elementlar oldin va keyin. Ularni qo'llashda ijobiy plyus bor - tasvirni elementning chetiga olib o'tish mumkin, shunda u chegarada yo'qolmaydi, balki uning tepasida bo'ladi. Agar siz 3D effekti kabi biror narsa qilishingiz kerak bo'lsa, bu usul foydalidir.

Blokimg (fon: url ("img / img1.jpg") takrorlanmaydi; / * element foni * / joylashuvi: nisbiy; / * joylashuv maydoni * / chekka: 200px avtomatik 15px; quti oʻlchami: chegara qutisi; toʻldirish: 25px; kenglik: 700px; min-balandlik: 300px;) .blockimg :: oldin (fon: url ("img / img1.png") takrorlanmaydigan markaz markazi; pastki: 0; kontent: ""; balandlik: 295px; chap: 0; pozitsiya: mutlaq; / * mutlaq joylashishni aniqlash * / o'ng: 0; yuqori: -150px;)

Tushuntirish. Aslida, hamma narsa juda oddiy. Asosiy elementga fonni odatiy tarzda o'rnating. Keyinchalik asosiy xususiyat pozitsiyasi keladi: nisbiy; bu asosiy elementdagi va o'ringa ega bo'lgan boshqa elementni ko'chirish maydonini belgilaydi: mutlaq; ...

Boshqa element o'rniga, rasmiy ravishda, u alohida maydon sifatida ketadi, biz psevdo-elementdan foydalanamiz. Biz unga mutlaq pozitsiyani beramiz va uni kerakli joyga joylashtiramiz.

Bir vaqtning o'zida bir nechta elementni qo'shishingiz mumkin fon rasmlari yagona mulk fon orqali. Bu murakkab fon yoki bitta rasm yaratish uchun bitta elementdan foydalanishga imkon beradi, uni bir necha marta bilan ko'rsatadi turli xil sozlamalar... Parametrlari bo'lgan barcha tasvirlar vergul bilan ajratilgan holda ro'yxatga olinadi, shu bilan birga rasm birinchi bo'lib ko'rsatiladi, u qolgan rasmlarning tepasida ko'rsatiladi va oxirgisi mos ravishda eng past rasmdir. 1-misol uchta rasm bilan fonni qanday yaratishni ko'rsatadi.

Misol 1. Uchta fon

Agar yuqoridagi misoldagi kabi fon o'lchami kabi fon uchun uslub xususiyatini alohida o'rnatishingiz kerak bo'lsa, har bir fon uchun parametrlar vergul bilan ajratilgan holda ro'yxatga olinadi. Ushbu misolning natijasi rasmda ko'rsatilgan. 1.

Guruch. 1. Uchta tasvirli fon

Fon uchun alohida tasvirlar 2-misolda ko'rsatilganidek, ularning o'rnini o'zgartirishga, shuningdek jonlantirishga imkon beradi.

2-misol. Animatsiyalangan fon

Keling, ramkali blokni yaratish uchun bitta rasmdan qanday foydalanishni ko'rib chiqaylik (2-rasm). Blokning kengligi o'rnatiladi va balandligi blok tarkibining hajmiga qarab cho'ziladi.

Guruch. 2. Qo'lda chizilgan ramka

Rasmda yuqori va aniq ko'rsatilgan Pastki qism kesish uchun grafik muharriri va uni gorizontal holatda joylashtiring. O'rta qism tikuvsiz vertikal ravishda takrorlanishi uchun tanlangan. Rasmda aniq takrorlanadigan naqsh mavjud, shuning uchun tanlashda hech qanday qiyinchiliklar bo'lmasligi kerak. Natijada siz shunday tayyorlangan tasvirni olasiz (3-rasm). Belgilangan katak shaffoflikni bildiradi, bu sizga tasvirlar bilan birga rangli fonni o'rnatish va uni uslublar orqali osongina o'zgartirish imkonini beradi.

Guruch. 3. Fon rasmi uchun tayyorlangan

Fonning o'zi fon xususiyati bilan ko'rsatiladi, shuningdek, kerakli fragmentning koordinatalarini o'rnatadi. Har bir fonning parametrlari vergul bilan ajratilgan sanab o'tilgan va bu holda ularning tartibi muhim ahamiyatga ega. Biz blokning yuqori va pastki qismlari bir-biriga yopishmasligini xohlaymiz, shuning uchun biz ularni birinchi o'ringa qo'yamiz (3-misol). Fon rangi oxirgi marta belgilanadi.

Misol 3. Bir nechta fon rasmlari

Birinchi fon qutining yuqori chegarasini, ikkinchi fon pastki qismini, uchinchisi esa vertikal chegaralarini chizadi. Oxirgi - blokning shaffof markaziy qismida ko'rinadigan rang (4-rasm).

). Bugun biz yana bir qiziqarli xususiyat - fonda bir nechta tasvirlardan foydalanish haqida bir oz gaplashamiz.

Fonlar tarkibi

Umuman olganda, fonda bir nechta rasm yaratishingiz kerak bo'lishi mumkin bo'lgan ko'plab sabablar mavjud, ular orasida eng muhimlari:

• Agar alohida tasvirlar birgalikda tekislangan qatlamli tasvirdan kamroq og'irlik qilsa, tasvirlar hajmi bo'yicha trafikni tejash va
• alohida qatlamlarning mustaqil xatti-harakatlariga bo'lgan ehtiyoj, masalan, parallaks effektlarini amalga oshirishda.

Boshqa mantiqiy sabablar ham bo'lishi mumkin :)

Klassik yondashuv

Shunday qilib, biz bir nechta fon rasmlarini bir-birining ustiga qo'yishimiz kerak. Odatda bu vazifa qanday hal qilinadi? Bu juda oddiy: har bir fon tasviri uchun blok yaratiladi va unga mos keladigan fon tasviri tayinlanadi. Bloklar bir-birining ichiga joylashtirilgan yoki tegishli joylashishni aniqlash qoidalari bilan bir qatorga joylashtirilgan. Mana oddiy misol:

Faqat namoyish qilish uchun "suv parisi" ichidagi "baliq ovlash" sinfiga ega blok.

Endi ba'zi uslublar:
.sample1 .dengiz, .sample1 .mermaid, .sample1 .baliq ovlash (balandlik: 300px; kenglik: 480px; joylashuv: nisbiy;) .sample1 .dengiz (fon: url (media / sea.png) takrorlash-x yuqori chap;) .sample1 .mermaid (fon: url (media / mermaid.svg) takrorlash-x pastki chap;) .sample1 .fish (fon: url (media / fish.svg) takrorlanmaydi; balandlik: 70px; kenglik: 100px; chap : 30px; tepa: 90px; pozitsiya: mutlaq;) .sample1 .baliq ovlash (fon: url (media / fishing.svg) takrorlanmaydi, yuqori oʻng 10px;)

Natija:

V bu misol uchta uyali fon va baliqli bitta blok, "fon" bloklari yonida joylashgan. Nazariy jihatdan, baliqni, masalan, JavaScript yoki CSS3 Transitions / Animations yordamida ko'chirish mumkin.

Aytgancha, ushbu misolda CSS3 da aniqlangan ".fishing" uchun yangi fon joylashuvi sintaksisi qo'llaniladi:
fon: url (media / fishing.svg) takrorlanmaydigan yuqori o'ng 10px;
Yoniq bu daqiqa u IE9 + va Opera 11+ da qo'llab-quvvatlanadi, lekin Firefox 10 va Chrome 16 da qo'llab-quvvatlanmaydi. Shunday qilib, oxirgi ikki brauzer foydalanuvchilari hali baliq tuta olmaydi.

Bir nechta fon

CSS3-ga qo'shilgan yangi xususiyat yordamga keladi - bir element uchun bir vaqtning o'zida bir nechta fon tasvirlarini aniqlash qobiliyati. Bu shunday ko'rinadi:

Va tegishli uslublar:
.sample2 .dengiz (balandlik: 300px; kenglik: 480px; joylashuv: nisbiy; fon-tasvir: url ("media / fishing.svg"), url ("media / mermaid.svg"), url ("media / dengiz. png "); fon joylashuvi: yuqori oʻng 10px, pastki chap, yuqori chap; fonda takrorlash: takrorlanmaslik, takrorlash-x, takrorlash-x;) .sample2 .fish (fon: url (" media / fish.svg) ") takrorlanmaslik; balandlik: 70px; kenglik: 100px; chap: 30px; tepa: 90px; pozitsiya: mutlaq;)
Bir nechta rasmlarni belgilash uchun siz vergul bilan ajratilgan alohida rasmlarni ro'yxatlashda fon tasviri qoidasidan foydalanishingiz kerak. Qo'shimcha qoidalar, shuningdek, ro'yxat, siz har bir tasvir uchun joylashishni aniqlash, takrorlash va boshqa parametrlarni o'rnatishingiz mumkin. Tasvirlar ro'yxatini joylashtirish tartibiga e'tibor bering: qatlamlar chapdan o'ngga eng yuqoridan pastgacha ro'yxatga olinadi.

Natija aynan bir xil:

Bitta qoida

Agar baliqni keyingi manipulyatsiyalar uchun alohida blokda tanlash kerak bo'lmasa, butun rasm bitta bilan qayta yozilishi mumkin. oddiy qoida:

Uslublar:
.sample3 .dengiz (balandlik: 300px; kenglik: 480px; joylashuv: nisbiy; fon-tasvir: url ("media / fishing.svg"), url ("media / mermaid.svg"), url ("media / baliq. svg "), url (" media / sea.png "); fon pozitsiyasi: yuqori o'ng 10px, pastki chap, 30px 90px, yuqori chap; fon-takror: takrorlanmaslik, takrorlash-x;)

Natija bilan rasm bermayman - ishoning, bu yuqoridagi ikkita rasmga to'g'ri keladi. Ammo yana uslublarga, ayniqsa "fon-takrorlash" ga e'tibor bering - spetsifikatsiyaga ko'ra, agar ro'yxatning oxiridagi qism yo'q bo'lsa, brauzer raqamga mos kelishi uchun ko'rsatilgan ro'yxatni kerak bo'lganda ko'p marta takrorlashi kerak. ro'yxatdagi rasmlar.

Bunday holda, u ushbu tavsifga teng:
fon-takrorlash: takrorlanmaslik, takrorlash-x, takrorlanmaslik, takrorlash-x;

Hatto qisqaroq

Agar CSS 2.1 ni eslayotgan bo'lsangiz, u fon tasvirlarini qisqacha tasvirlash qobiliyatini belgilaydi. Bir nechta tasvir haqida nima deyish mumkin? Bu ham mumkin:

Namuna4 .dengiz (balandlik: 300px; kenglik: 480px; joylashuv: nisbiy; fon: url (“media / fishing.svg") yuqori oʻng 10px takroriy, url (“media / mermaid.svg”) pastki chap takrorlash-x , url ("media / fish.svg") 30px 90px takrorlashsiz, url ("media / sea.png") takrorlash-x;)

Ammo shuni yodda tutingki, endi siz qiymatlarni o'tkazib yubora olmaysiz (agar ular standart qiymatga to'g'ri kelmasa). Aytgancha, agar siz fon tasvirining rangini o'rnatmoqchi bo'lsangiz, bu oxirgi qatlamda bajarilishi kerak.

Dinamik tasvirlar

Agar kompozitsiya idishning o'lchamiga qarab statik yoki dinamik bo'lsa, unda bir nechta fonlar sahifa dizaynini soddalashtiradi. Ammo javascriptdan mustaqil ravishda kompozitsiyaning alohida elementlari bilan ishlash kerak bo'lsa-chi (ko'chirish, aylantirish va h.k.)?

Aytgancha, bu erda haqiqiy hayotdan bir misol - Yandex-da karahindiba bilan mavzu:


Agar siz kodni o'rgansangiz, shunga o'xshash narsani ko'rasiz:

...

"b-fluff-bg", "b-fluff__cloud" va "b-fluff__item" sinflariga ega bloklar bir-birining ustiga chiqadigan fon rasmlarini o'z ichiga oladi. Bundan tashqari, bulutli fon doimiy ravishda aylantiriladi va karahindiba ekran bo'ylab uchadi.

Buni bir nechta fon yordamida qayta yozish mumkinmi? Aslida, ha, lekin 1) maqsadli brauzerlarda ushbu xususiyatni qo'llab-quvvatlash va ... 2) o'qing;)

Bir nechta fonga dinamiklarni qanday qo'shishim mumkin? Bunday vaziyatda brauzer ichki ko'rinishda o'rnatish qulay bo'lib chiqadi individual parametrlar tegishli qoidalarga muvofiq fon rasmlari. Masalan, joylashishni aniqlash uchun "fon pozitsiyasi" mavjud va ofsetlar uchun faqat uni o'zgartirish kerak. Biroq, bir nechta tasvirlardan foydalanish uchun to'lov olinadi - bu qoida (va shunga o'xshash har qanday qoida) blokingiz uchun o'rnatilgan barcha fonlar uchun pozitsiyani ko'rsatishi kerak va siz buni tanlab bajara olmaysiz.

Baliq bilan fonimizga animatsiya qo'shish uchun siz quyidagi koddan foydalanishingiz mumkin:
$ (hujjat) .ready (funksiya () (var dengiz = $ (". sample5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var mermaidX = 0; var t = 0; animationLoop funktsiyasi () (fishesY = 90 + Math.floor (30 * Math.sin (t ++ / 180.0)); if (- fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) mermaidX = 0; fishY = -10 + (10 * Math.cos (t * 0,091)); fishX = 10 + (5 * Math.sin (t * 0,07)); sea.style.backgroundPosition = "yuqori" + fishY + "px o'ng" + fishX + "px," + mermaidX + "px pastki", + fishesX + "px" + fishesY + "px, chap yuqori"; window.requestAnimFrame (animatsionLoop); ) animatsionLoop (); )))
qayerda
window.requestAnimFrame = (funksiya () (qaytish window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame ||) (funksiya (0)); );

Aytgancha, animatsiyalarni CSS3 Transitions / Animations orqali ham qilish mumkin, ammo bu alohida muhokama uchun mavzu.

Parallaks va interaktiv

Va nihoyat, shunga o'xshash manevrlar yordamida siz parallaks effektlarini yoki fon bilan interaktiv o'zaro ta'sirni osongina qo'shishingiz mumkin:

Bunday stsenariylarda bir nechta fon tasvirlari foydali bo'ladi, chunki biz faqat fon haqida gapirayotganimizda (kontent haqida emas), ulardan foydalanish HTML kodingiz va DOM-ni chalkashtirib yubormaslik imkonini beradi. Lekin siz hamma narsa uchun to'lashingiz kerak: men bog'lana olmayman individual elementlar nom, id, sinf yoki boshqa parametr bo'yicha kompozitsiya. Koddagi kompozitsiyadagi elementlarning tartibini aniq eslab qolishim kerak va har qanday elementning har qanday parametrini har bir o'zgartirish uchun, aslida, barcha elementlar uchun ushbu parametrning qiymatlarini tavsiflovchi chiziqni yopishtirishim va uni yangilashim kerak. butun tarkibi.

Sea.style.backgroundPosition = "tepa" + fishY + "px o'ng" + fishX + "px," + mermaidX + "px pastki", + fishesX + "px" + fishesY + "px, chap yuqori";

Ishonchim komilki, bu qulay JavaScript kodiga o'ralgan bo'lishi mumkin, u alohida qatlamlar bilan munosabatlarni virtualizatsiya qilishni o'z zimmasiga oladi va sahifaning html-kodini iloji boricha toza qiladi.

Muvofiqlik nima?

Barcha zamonaviy versiyalari mashhur brauzerlar shu jumladan IE9 +, bir nechta tasvirlarni qo'llab-quvvatlaydi (masalan, caniuse bilan tekshirishingiz mumkin).

Bundan tashqari, bir nechta fonni qo'llab-quvvatlamaydigan brauzerlarni alternativa bilan ta'minlash uchun Modernizr-dan foydalanishingiz mumkin. Kris Koyier bir nechta fondan foydalanganda qatlam tartibi to'g'risidagi yozuvida yozganidek, shunday qiling:

Multiplebgs tanasi (/ * Haqiqatdan oshib ketadigan ajoyib bir nechta BG deklaratsiyasi va manbasiz jo'jalar * /) .no-multiplebgs tanasi (/ * laaaaaaame backback * /)
Agar siz JS-dan orqaga qarab muvofiqlikni ta'minlash uchun foydalanishda adashsangiz, fonni ikki marta e'lon qilishingiz mumkin, ammo bu resurslarni ikki marta yuklash ko'rinishidagi kamchiliklarga ham ega (bu ma'lum bir brauzerda CSS-ni qayta ishlashni amalga oshirishga bog'liq):

/ * bir nechta bg zaxira * / fon: # 000 url (...) ...; / * Haqiqatdan oshib ketadigan bir nechta BG deklaratsiyasi va manbasiz jo'jalar * / fon url (...), url (...), url (...), # 000 url (...);

Agar siz allaqachon Windows 8 haqida o'ylashni boshlagan bo'lsangiz, metro uslubidagi ilovalarni ishlab chiqishda bir nechta fondan foydalanishingiz mumkinligini yodda tuting, chunki xuddi shu dvigatel IE10 da bo'lgani kabi ichki sifatida ishlatiladi.

P.s. Mavzu bo'yicha: Men haqidagi ajoyib maqolani eslay olmayman.

). Bugun biz yana bir qiziqarli xususiyat - fonda bir nechta tasvirlardan foydalanish haqida bir oz gaplashamiz.

Fonlar tarkibi

Umuman olganda, fonda bir nechta rasm yaratishingiz kerak bo'lishi mumkin bo'lgan ko'plab sabablar mavjud, ular orasida eng muhimlari:

• Agar alohida tasvirlar birgalikda tekislangan qatlamli tasvirdan kamroq og'irlik qilsa, tasvirlar hajmi bo'yicha trafikni tejash va
• alohida qatlamlarning mustaqil xatti-harakatlariga bo'lgan ehtiyoj, masalan, parallaks effektlarini amalga oshirishda.

Boshqa mantiqiy sabablar ham bo'lishi mumkin :)

Klassik yondashuv

Shunday qilib, biz bir nechta fon rasmlarini bir-birining ustiga qo'yishimiz kerak. Odatda bu vazifa qanday hal qilinadi? Bu juda oddiy: har bir fon tasviri uchun blok yaratiladi va unga mos keladigan fon tasviri tayinlanadi. Bloklar bir-birining ichiga joylashtirilgan yoki tegishli joylashishni aniqlash qoidalari bilan bir qatorga joylashtirilgan. Mana oddiy misol:

Faqat namoyish qilish uchun "suv parisi" ichidagi "baliq ovlash" sinfiga ega blok.

Endi ba'zi uslublar:
.sample1 .dengiz, .sample1 .mermaid, .sample1 .baliq ovlash (balandlik: 300px; kenglik: 480px; joylashuv: nisbiy;) .sample1 .dengiz (fon: url (media / sea.png) takrorlash-x yuqori chap;) .sample1 .mermaid (fon: url (media / mermaid.svg) takrorlash-x pastki chap;) .sample1 .fish (fon: url (media / fish.svg) takrorlanmaydi; balandlik: 70px; kenglik: 100px; chap : 30px; tepa: 90px; pozitsiya: mutlaq;) .sample1 .baliq ovlash (fon: url (media / fishing.svg) takrorlanmaydi, yuqori oʻng 10px;)

Natija:

Ushbu misolda, "fon" bloklari yonida joylashgan uchta ichki fon va baliqli bitta blok mavjud. Nazariy jihatdan, baliqni, masalan, JavaScript yoki CSS3 Transitions / Animations yordamida ko'chirish mumkin.

Aytgancha, ushbu misolda CSS3 da aniqlangan ".fishing" uchun yangi fon joylashuvi sintaksisi qo'llaniladi:
fon: url (media / fishing.svg) takrorlanmaydigan yuqori o'ng 10px;
Hozirda u IE9+ va Opera 11+ da qo‘llab-quvvatlanadi, lekin Firefox 10 va Chrome 16 da qo‘llab-quvvatlanmaydi. Shunday qilib, oxirgi ikki brauzer foydalanuvchilari hali baliq tuta olmaydi.

Bir nechta fon

CSS3-ga qo'shilgan yangi xususiyat yordamga keladi - bir element uchun bir vaqtning o'zida bir nechta fon tasvirlarini aniqlash qobiliyati. Bu shunday ko'rinadi:

Va tegishli uslublar:
.sample2 .dengiz (balandlik: 300px; kenglik: 480px; joylashuv: nisbiy; fon-tasvir: url ("media / fishing.svg"), url ("media / mermaid.svg"), url ("media / dengiz. png "); fon joylashuvi: yuqori oʻng 10px, pastki chap, yuqori chap; fonda takrorlash: takrorlanmaslik, takrorlash-x, takrorlash-x;) .sample2 .fish (fon: url (" media / fish.svg) ") takrorlanmaslik; balandlik: 70px; kenglik: 100px; chap: 30px; tepa: 90px; pozitsiya: mutlaq;)
Bir nechta rasmlarni belgilash uchun siz vergul bilan ajratilgan alohida rasmlarni ro'yxatlashda fon tasviri qoidasidan foydalanishingiz kerak. Qo'shimcha qoidalar, shuningdek, ro'yxat, har bir tasvir uchun joylashishni aniqlash, takrorlash va boshqa parametrlarni o'rnatish uchun ishlatilishi mumkin. Tasvirlar ro'yxatini joylashtirish tartibiga e'tibor bering: qatlamlar chapdan o'ngga eng yuqoridan pastgacha ro'yxatga olinadi.

Natija aynan bir xil:

Bitta qoida

Agar baliqni keyingi manipulyatsiyalar uchun alohida blokda tanlash kerak bo'lmasa, butun rasmni bitta oddiy qoida bilan qayta yozish mumkin:

Uslublar:
.sample3 .dengiz (balandlik: 300px; kenglik: 480px; joylashuv: nisbiy; fon-tasvir: url ("media / fishing.svg"), url ("media / mermaid.svg"), url ("media / baliq. svg "), url (" media / sea.png "); fon pozitsiyasi: yuqori o'ng 10px, pastki chap, 30px 90px, yuqori chap; fon-takror: takrorlanmaslik, takrorlash-x;)

Natija bilan rasm bermayman - ishoning, bu yuqoridagi ikkita rasmga to'g'ri keladi. Ammo yana uslublarga, ayniqsa "fon-takrorlash" ga e'tibor bering - spetsifikatsiyaga ko'ra, agar ro'yxatning oxiridagi qism yo'q bo'lsa, brauzer raqamga mos kelishi uchun ko'rsatilgan ro'yxatni kerak bo'lganda ko'p marta takrorlashi kerak. ro'yxatdagi rasmlar.

Bunday holda, u ushbu tavsifga teng:
fon-takrorlash: takrorlanmaslik, takrorlash-x, takrorlanmaslik, takrorlash-x;

Hatto qisqaroq

Agar CSS 2.1 ni eslayotgan bo'lsangiz, u fon tasvirlarini qisqacha tasvirlash qobiliyatini belgilaydi. Bir nechta tasvir haqida nima deyish mumkin? Bu ham mumkin:

Namuna4 .dengiz (balandlik: 300px; kenglik: 480px; joylashuv: nisbiy; fon: url (“media / fishing.svg") yuqori oʻng 10px takroriy, url (“media / mermaid.svg”) pastki chap takrorlash-x , url ("media / fish.svg") 30px 90px takrorlashsiz, url ("media / sea.png") takrorlash-x;)

Ammo shuni yodda tutingki, endi siz qiymatlarni o'tkazib yubora olmaysiz (agar ular standart qiymatga to'g'ri kelmasa). Aytgancha, agar siz fon tasvirining rangini o'rnatmoqchi bo'lsangiz, bu oxirgi qatlamda bajarilishi kerak.

Dinamik tasvirlar

Agar kompozitsiya idishning o'lchamiga qarab statik yoki dinamik bo'lsa, unda bir nechta fonlar sahifa dizaynini soddalashtiradi. Ammo javascriptdan mustaqil ravishda kompozitsiyaning alohida elementlari bilan ishlash kerak bo'lsa-chi (ko'chirish, aylantirish va h.k.)?

Aytgancha, bu erda haqiqiy hayotdan bir misol - Yandex-da karahindiba bilan mavzu:


Agar siz kodni o'rgansangiz, shunga o'xshash narsani ko'rasiz:

...

"b-fluff-bg", "b-fluff__cloud" va "b-fluff__item" sinflariga ega bloklar bir-birining ustiga chiqadigan fon rasmlarini o'z ichiga oladi. Bundan tashqari, bulutli fon doimiy ravishda aylantiriladi va karahindiba ekran bo'ylab uchadi.

Buni bir nechta fon yordamida qayta yozish mumkinmi? Aslida, ha, lekin 1) maqsadli brauzerlarda ushbu xususiyatni qo'llab-quvvatlash va ... 2) o'qing;)

Bir nechta fonga dinamiklarni qanday qo'shishim mumkin? Bunday holatda, ichki ko'rinishda brauzer tegishli qoidalarga muvofiq fon tasvirining individual parametrlarini tarqatishi qulay bo'lib chiqadi. Masalan, joylashishni aniqlash uchun "fon pozitsiyasi" mavjud va ofsetlar uchun faqat uni o'zgartirish kerak. Biroq, bir nechta tasvirlardan foydalanish uchun to'lov olinadi - bu qoida (va shunga o'xshash har qanday qoida) blokingiz uchun o'rnatilgan barcha fonlar uchun pozitsiyani ko'rsatishi kerak va siz buni tanlab bajara olmaysiz.

Baliq bilan fonimizga animatsiya qo'shish uchun siz quyidagi koddan foydalanishingiz mumkin:
$ (hujjat) .ready (funksiya () (var dengiz = $ (". sample5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var mermaidX = 0; var t = 0; animationLoop funktsiyasi () (fishesY = 90 + Math.floor (30 * Math.sin (t ++ / 180.0)); if (- fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) mermaidX = 0; fishY = -10 + (10 * Math.cos (t * 0,091)); fishX = 10 + (5 * Math.sin (t * 0,07)); sea.style.backgroundPosition = "yuqori" + fishY + "px o'ng" + fishX + "px," + mermaidX + "px pastki", + fishesX + "px" + fishesY + "px, chap yuqori"; window.requestAnimFrame (animatsionLoop); ) animatsionLoop (); )))
qayerda
window.requestAnimFrame = (funksiya () (qaytish window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame ||) (funksiya (0)); );

Aytgancha, animatsiyalarni CSS3 Transitions / Animations orqali ham qilish mumkin, ammo bu alohida muhokama uchun mavzu.

Parallaks va interaktiv

Va nihoyat, shunga o'xshash manevrlar yordamida siz parallaks effektlarini yoki fon bilan interaktiv o'zaro ta'sirni osongina qo'shishingiz mumkin:

Bunday stsenariylarda bir nechta fon tasvirlari foydali bo'ladi, chunki biz faqat fon haqida gapirayotganimizda (kontent haqida emas), ulardan foydalanish HTML kodingiz va DOM-ni chalkashtirib yubormaslik imkonini beradi. Lekin siz hamma narsa uchun to'lashingiz kerak: men kompozitsiyaning alohida elementlariga nom, id, sinf yoki boshqa parametrlar bo'yicha murojaat qila olmayman. Men koddagi kompozitsiyadagi elementlarning tartibini aniq eslab qolishim kerak va har qanday elementning har qanday parametrini har bir o'zgartirish uchun, aslida, men ushbu parametrning qiymatlarini tavsiflovchi chiziqni barcha elementlar uchun yopishtirishim va uni yangilashim kerak. butun tarkibi.

Sea.style.backgroundPosition = "tepa" + fishY + "px o'ng" + fishX + "px," + mermaidX + "px pastki", + fishesX + "px" + fishesY + "px, chap yuqori";

Ishonchim komilki, bu qulay JavaScript kodiga o'ralgan bo'lishi mumkin, u alohida qatlamlar bilan munosabatlarni virtualizatsiya qilishni o'z zimmasiga oladi va sahifaning html-kodini iloji boricha toza qiladi.

Muvofiqlik nima?

Mashhur brauzerlarning barcha zamonaviy versiyalari, shu jumladan IE9 +, bir nechta tasvirlarni qo'llab-quvvatlaydi (masalan, caniuse bilan tekshirishingiz mumkin).

Bundan tashqari, bir nechta fonni qo'llab-quvvatlamaydigan brauzerlarni alternativa bilan ta'minlash uchun Modernizr-dan foydalanishingiz mumkin. Kris Koyier bir nechta fondan foydalanganda qatlam tartibi to'g'risidagi yozuvida yozganidek, shunday qiling:

Multiplebgs tanasi (/ * Haqiqatdan oshib ketadigan ajoyib bir nechta BG deklaratsiyasi va manbasiz jo'jalar * /) .no-multiplebgs tanasi (/ * laaaaaaame backback * /)
Agar siz JS-dan orqaga qarab muvofiqlikni ta'minlash uchun foydalanishda adashsangiz, fonni ikki marta e'lon qilishingiz mumkin, ammo bu resurslarni ikki marta yuklash ko'rinishidagi kamchiliklarga ham ega (bu ma'lum bir brauzerda CSS-ni qayta ishlashni amalga oshirishga bog'liq):

/ * bir nechta bg zaxira * / fon: # 000 url (...) ...; / * Haqiqatdan oshib ketadigan bir nechta BG deklaratsiyasi va manbasiz jo'jalar * / fon url (...), url (...), url (...), # 000 url (...);

Agar siz allaqachon Windows 8 haqida o'ylashni boshlagan bo'lsangiz, metro uslubidagi ilovalarni ishlab chiqishda bir nechta fondan foydalanishingiz mumkinligini yodda tuting, chunki xuddi shu dvigatel IE10 da bo'lgani kabi ichki sifatida ishlatiladi.

P.s. Mavzu bo'yicha: Men haqidagi ajoyib maqolani eslay olmayman

CSS 2-da bir elementga bir vaqtning o'zida ikkita fon qo'shish haqiqiy emas, shuning uchun siz bir elementni ikkinchisining ichiga joylashtirishingiz va har biri uchun o'z fon rasmini o'rnatishingiz kerak. Murakkab tartiblar uchun bunday qo'shimchalarni ba'zan o'nga yaqin hisoblash mumkin. Bunday uyum yaxshi narsaga olib kelmasligi aniq, lekin nima qilish kerak? Bir narsa borligi ma'lum bo'ldi! CSS 3 da siz bir nechta qo'shishingiz mumkin fon rasmlari har qanday element uchun. Shunday qilib, biz blokli chizmani olamiz (1-rasm), uni qismlarga bo'lib, brauzerlarda sinovdan o'tkazishni boshlaymiz.

Guruch. 1. Saytni bloklash

Oddiylik uchun men blokning kengligini qat'iy o'lcham sifatida olaman va balandligi tarkibga qarab cho'ziladi. Rasmda yuqori va pastki qismlar aniq ko'rsatilgan, men uni muharrirda kesib tashladim va alohida faylda qatlamlarga katlamam. O'rta qism tikuvsiz vertikal ravishda takrorlanadigan tarzda tanlanishi kerak. Chizma yaxshi aniqlangan takrorlanuvchi naqshga ega, shuning uchun tanlashda hech qanday qiyinchiliklar bo'lmasligi kerak. Nusxalash va oldingi parchalarga joylashtirish. Natijada siz bunday rasmni olasiz (2-rasm).

Guruch. 2. Tayyorlangan tasvirlar

Asosan, har bir bo'lakni shunday saqlash mumkin alohida fayl, lekin CSS spritlari (bu bir nechta tasvirlarni biriga yopishtirish texnologiyasining nomi) bir qator afzalliklarga ega. Birinchidan, fayllar sonining kamayishi hisobiga serverga so'rovlar soni kamayadi, ikkinchidan, jami tasvirlar tezroq yuklanadi va ko'rsatiladi.

Fonning o'zi fon xususiyati bilan ko'rsatiladi, shuningdek, kerakli fragmentning koordinatalarini o'rnatadi. Har bir fonning parametrlari vergul bilan ajratilgan va bu holda ularning tartibi muhim ahamiyatga ega. Men blokning yuqori va pastki qismlari bir-biriga yopishmasligini xohlayman, shuning uchun ularni birinchi o'ringa qo'yaman (1-misol).

Misol 1. Bir nechta fon tasvirlari

HTML5 CSS2.1 CSS3 IE 8 IE 9 Cr Op Sa Fx

Birinchi fon qutining yuqori chegarasini, ikkinchi fon pastki qismini, uchinchisi esa vertikal chegaralarini chizadi.

Brauzerlarda tekshirish. Internet Explorer 8 hech qanday tasvirni umuman ko'rsatmadi, boshqa brauzerlar (IE 9, Opera 10.60, Firefox 3.6, Chrome 5, Safari 5) ramkani to'g'ri ko'rsatdi (3-rasm).

Guruch. 3. Safari brauzerida ramkaning ko'rinishi

Bir nechta fondan foydalanish, ishlab chiquvchilar uchun vaziyatni ancha osonlashtiradi, ayniqsa tartib bloklari. Faqat bitta kichik narsa qoldi. IE 6-8 brauzeri o'z faoliyatini to'xtatishi kerak.