CSS3 uchun bir nechta fon. CSS bilan bir nechta fon yoki bir nechta fon

.

CSS 2 -da, bitta elementga bir vaqtning o'zida ikkita fon qo'shish haqiqiy emas, shuning uchun siz bitta elementni ikkinchisiga 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. Ma'lumki, bunday uy yaxshi narsaga olib kelmaydi, lekin nima qilish kerak? Ma'lum bo'lishicha, nimadir bor! CSS 3 -da siz har qanday elementga bir vaqtning o'zida bir nechta fon rasmlarini qo'shishingiz mumkin. Shunday qilib, biz blokli rasmni olamiz (1 -rasm), uni bo'laklarga bo'lib, brauzerlarda sinovni boshlaymiz.

Guruch. 1. Sayt uchun blokirovka

Oddiylik uchun, blokning kengligi belgilangan o'lchamda bo'ladi va balandligi tarkibga qarab cho'ziladi. Rasmda yuqori va pastki qismlar aniq ko'rsatilgan, men uni muharrirda kesib tashladim va alohida faylga qatlamlarga yig'dim. O'rta qismi tikuvsiz vertikal ravishda takrorlanishi uchun tanlanishi kerak. Chizma aniq belgilangan takroriy naqshga ega, shuning uchun tanlashda qiyinchiliklar bo'lmasligi kerak. Oldingi qismlarga nusxa ko'chiring va joylashtiring. Natijada siz shunday rasmga ega bo'lasiz (2 -rasm).

Guruch. 2. Tayyorlangan tasvirlar

Asosan, siz har bir bo'lakni alohida fayl sifatida saqlashingiz mumkin, lekin CSS sprite (bu bir nechta tasvirni bittaga yopishtirish texnologiyasining nomi) bir qator afzalliklarga ega. Birinchidan, fayllar sonining kamayishi tufayli serverga so'rovlar soni kamayadi, ikkinchidan, jami raqamlar yuklanadi va tezroq ko'rsatiladi.

Fonning o'zi fon xususiyati bilan ko'rsatiladi, shuningdek, kerakli bo'lakning koordinatalarini o'rnatadi. Har bir fon parametrlari vergul bilan ajratilgan va bu holda ularning tartibi muhim. Men blokning yuqori va pastki qismlari bir -birining ustiga chiqmasligini xohlayman, shuning uchun men 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 chegaralarni chizadi.

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

Guruch. 3. Safari brauzerida ramkaning ko'rinishi

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

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

Fonlarning tarkibi

Umuman olganda, fonda bir nechta tasvirlarni yaratish kerak bo'lishi mumkin bo'lgan ko'p sabablar bor, ular orasida eng muhimlari:

• agar individual tasvirlar birgalikda tekislangan qatlamli tasvirdan kichikroq bo'lsa va tasvirlar hajmidagi trafikni tejash
• individual qatlamlarning mustaqil xatti -harakatlariga bo'lgan ehtiyoj, masalan, paralaks effektlarini amalga oshirishda.

Boshqa sabablar 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 tegishli fon tasviri tayinlanadi. Bloklar bir -birining ichiga joylashtirilgan yoki tegishli joylashish qoidalari bilan ketma -ket joylashtirilgan. Mana oddiy misol:

"Suv parisi" ichida "baliq ovlash" sinfini blokirovka qilish faqat namoyish maqsadida.

Endi ba'zi uslublar:
.sample1. dengiz, .sample1 .suvir, .sample1. baliq ovlash (balandlik: 300px; kenglik: 480px; pozitsiya: 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; balandligi: 70 piksel; kengligi: 100 piksel; chap : 30px; tepa: 90px; pozitsiya: mutlaq;) .sample1. Baliq ovlash (fon: url (media / fishing.svg) takrorlanmaydi yuqori o'ng 10 piksel;)

Natija:

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

Aytgancha, bu misolda CSS3 da aniqlangan ".fishing" uchun fonni aniqlashning yangi sintaksisi ishlatiladi:
fon: url (media / fishing.svg) takrorlanmaydi yuqori o'ng 10 piksel;
U hozirda IE9 + va Opera 11+ da qo'llab -quvvatlanadi, lekin Firefox 10 va Chrome 16 da qo'llab -quvvatlanmaydi. Shunday qilib, oxirgi ikki ko'zdan kechgan foydalanuvchilar hali baliq tuta olmaydi.

Ko'p fon

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

Va mos keladigan uslublar:
.samp 2 png "); fon-pozitsiyasi: yuqori o'ngdagi 10 piksel, pastki chap, yuqori chap; orqa-takrorlash: takrorlanmaydi, takrorlash-x, takrorlash-x;) .sample2 .fish (fon: url (" media / fish.svg) ") takrorlanmaydi; balandlik: 70 piksel; kenglik: 100 piksel; chap: 30 piksel; tepa: 90 piksel; pozitsiya: mutlaq;)
Bir nechta tasvirni aniqlash uchun siz fon tasvirining qoidasini ishlatishingiz kerak, alohida tasvirlarni vergul bilan ajratib qo'yishingiz kerak. Qo'shimcha qoidalar, shuningdek ro'yxat, har bir rasm uchun joylashishni aniqlash, takrorlash va boshqa parametrlarni o'rnatish uchun ishlatilishi mumkin. Rasmlar ro'yxatiga e'tibor bering: qatlamlar chapdan o'ngga, yuqoridan pastgacha.

Natija aynan bir xil:

Bitta qoida

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

Uslublar:
.sample3. dengiz (balandligi: 300 piksel; kengligi: 480 piksel; pozitsiyasi: nisbiy; fon tasviri: url ("media / baliqchilik.svg"), url ("media / mermaid.svg"), url ("media / baliq. svg "), url (" media / sea.png "); fon joylashuvi: yuqori o'ng 10 piksel, pastki chap, 30 piksel 90 piksel, yuqori chap; fon takrorlash: takrorlanmaydi, takrorlash x;)

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

Bu holda, bu tavsifga teng:
fon-takrorlash: takrorlamaslik, takrorlash-x, takrorlanmaydi, takrorlanadi-x;

Hatto qisqaroq

Agar siz CSS 2.1 -ni eslasangiz, u fon tasvirlarini qisqacha tasvirlash qobiliyatini belgilaydi. Bir nechta rasm haqida nima deyish mumkin? Bu ham mumkin:

4-namuna. Dengiz (balandligi: 300 piksel; kengligi: 480 piksel; pozitsiyasi: nisbiy; fon: url ("media / fishing.svg") yuqori o'ngda 10 piksel takrorlanmaydi, url ("media / mermaid.svg") pastki chapda takrorlash-x , url ("media / fish.svg") 30 pikselli 90 piksel takrorlanmagan, url ("media / sea.png") takrorlash-x;)

E'tibor bering, endi siz qiymatlarni o'tkazib yubora olmaysiz (agar ular standartga to'g'ri kelmasa). Aytgancha, agar siz fon tasvirining rangini o'rnatmoqchi bo'lsangiz, uni oxirgi qatlamda bajarish kerak.

Dinamik tasvirlar

Agar kompozitsiya konteyner hajmiga bog'liq holda statik yoki dinamik bo'lsa, unda bir nechta fon sahifa dizaynini soddalashtiradi. Ammo kompozitsiyaning alohida elementlari bilan javascriptdan mustaqil ravishda ishlash kerak bo'lsa (ko'chirish, aylantirish va h.k.) nima bo'ladi?

Aytgancha, bu erda haqiqiy hayotdan misol - Yandex -da momaqaymoqli mavzu:


Agar siz kodni o'rgansangiz, siz shunday narsani ko'rasiz:

...

"B-fluff-bg", "b-fluff__cloud" va "b-fluff__item" sinflari bo'lgan bloklar bir-biriga mos keladigan fon rasmlarini o'z ichiga oladi. Bundan tashqari, bulutli fon doimo siljiydi va momaqaldiroqlar ekran bo'ylab uchib ketadi.

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

Dinamiklarni bir nechta fonga qanday qo'shish mumkin? Bunday holatda, brauzer ichki ko'rinishda tegishli rasmga ko'ra, fon tasvirining individual parametrlarini tarqatishi qulay bo'ladi. Masalan, joylashishni aniqlash uchun "fon-pozitsiya" mavjud va ofsetlar uchun faqat uni o'zgartirish kifoya. Biroq, bir nechta tasvirlardan foydalanish uchun haq to'lanadi - bu qoida (va shunga o'xshash har qanday qoida) sizning blokingiz uchun o'rnatilgan barcha fonlarning o'rnini ko'rsatishi kerak va siz buni tanlab qila olmaysiz.

Baliq bilan bizning fonimizga animatsiya qo'shish uchun siz quyidagi kodni ishlatishingiz mumkin:
$ (hujjat) .ready (function () (var dengiz = $ (". namuna5. dengiz"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var mermaidX = 0; var t = 0; funktsiya animatsiyasiLoop () (fishesY = 90 + Math.floor (30 * Math.sin (t ++ / 180.0)); if (- fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) mermaidX = 0; baliqY = -10 + (10 * Math.cos (t * 0.091)); fishX = 10 + (5 * Math.sin (t * 0,07)); sea.style.backgroundPosition = "tepa" + baliqY + "px o'ng" + baliqX + "px," + mermaidX + "px pastki," + baliqlar X + "px" + baliqlar Y + "px, yuqori chap"; window.requestAnimFrame (animationLoop); ) animationLoop (); ));
qayerda
window.requestAnimFrame = (function () (return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame ()) ()) ()) (); );

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

Parallaks va interaktiv

Nihoyat, xuddi shunday manevralar yordamida siz paralaks yoki fon bilan interaktiv o'zaro ta'sir effektlarini osongina qo'shishingiz mumkin:

Bunday stsenariylarda bir nechta fon tasvirlari yordam beradi, chunki biz faqat fon haqida gapirganda (va tarkib emas), ularni ishlatish html va DOM tartibsizliklarini oldini oladi. Lekin siz hamma narsani to'lashingiz kerak: men kompozitsiyaning alohida elementlariga ism, id, sinf yoki boshqa parametrlar bo'yicha murojaat qila olmayman. Men kod tarkibidagi elementlarning tartibini aniq eslab qolishim kerak va har qanday elementning har qanday parametrining har bir o'zgarishi uchun, aslida, men barcha elementlar uchun ushbu parametr qiymatlarini tavsiflovchi qatorni yopishtirib, uni yangilashim kerak. butun kompozitsiya.

Sea.style.backgroundPosition = "tepa" + baliqY + "px o'ng" + baliqX + "px," + mermaidX + "px pastki," + baliqlar X + "px" + baliqlar Y + "px, yuqori chap";

Ishonchim komilki, bu sahifaning html-kodini iloji boricha toza qoldirib, individual qatlamlar bilan aloqalarni virtualizatsiyasini o'z zimmasiga oladigan qulay JavaScript kodiga o'ralgan bo'lishi mumkin.

Muvofiqlik nima?

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

Bundan tashqari, Modernizr -dan foydalanib, bir nechta fonni qo'llab -quvvatlamaydigan brauzerlarni muqobil echimlar bilan ta'minlash mumkin. Kris Coyier bir nechta fonlardan foydalanganda qatlamlar tartibi to'g'risidagi yozuvida shunday yozgan:

Multiplebgs body ( / * Voqelikdan oshib ketadigan ajoyib BG deklaratsiyalari va jo'jalarini imsourcess * /) .no-multibgs body ( / * laaaaaame fallback * /)
Agar siz orqaga qarab muvofiqlikni ta'minlash uchun JS -ni ishlatishda adashib qolsangiz, siz fonni ikki marta e'lon qilishingiz mumkin, lekin bu resurslarning ikki marta yuklanishi ko'rinishidagi kamchiliklarga ham ega (bu ma'lum bir brauzerda CSS -ni qayta ishlashga bog'liq):

/ * bir nechta bg backback * / background: # 000 url (...) ...; / * Haqiqatdan oshib ketadigan va jo'jalarini imsourcessdan o'tkazadigan ajoyib BG deklaratsiyalari * / background url (...), url (...), url (...), # 000 url (...);

Agar siz allaqachon Windows 8 haqida o'ylashni boshlagan bo'lsangiz, shuni yodda tutingki, metro uslubidagi ilovalarni ishlab chiqishda bir nechta fonlardan foydalanish mumkin, chunki IE10 dvigateli xuddi shu dvigatelda ishlatiladi.

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

Vazifa

CSS3 yordamida blok uchun ikkita fon rasmini qo'shing.

Yechim

Zamonaviy brauzerlar har bir fon uchun parametrlarni vergul bilan ajratib, elementga ixtiyoriy ravishda fon rasmlarini qo'shish imkonini beradi. Umumjahon mulk fonidan foydalanish va uning uchun bitta fonni, ikkinchisini vergul bilan ajratish kifoya.

Misol sifatida, blokning chap va o'ng tomonida vertikal dekorativ chiziqlar yaratishni ko'rib chiqing. Buning uchun birinchi navbatda tikuvsiz vertikal ravishda takrorlanishi kerak bo'lgan tasvirlarni tayyorlang. Fig. 1 -rasmda chap burchakda ko'rsatiladigan fon tasviri ko'rsatilgan va shakl. O'ng tomonda ko'rsatish uchun 2 ta rasm.

Guruch. 1. Chapdagi chegara uchun fon rasmi

Guruch. 2. O'ngdagi chegara uchun fon rasmi

Fon qo'shiladigan blok elementi sifatida odatda teg ishlatiladi