qulayligi va ko'p qirraliligi tufayli uni boshqa elementlardan farqlash uchun unga bloklar sinfi qo'shiladi (1-misol).

1-misol: Ikki fon rasmi

HTML5 CSS3 IE Cr Op Sa Fx

Ushbu misolning natijasi rasmda ko'rsatilgan. 3.

Bugungi kunda deyarli har bir veb-sayt dizaynida chiroyli fon tasviri mavjud.

Har bir dizayn dizayneri dizaynni yaratishning eng oddiy usuli eng yaxshisi ekanligini biladi. Oddiy va qulay usullardan biri bu bir nechta ishlatishdir CSS qatorlari kod.

Bu kichik narsa kabi ko'rinadi, lekin baribir, ba'zida siz murakkab narsa qilishingiz kerak bo'ladi oddiy tarzda. Masalan, yordamchi div bloklaridan foydalanmasdan, individual parametrlarga ega bir nechta fonni amalga oshiring. Ya'ni tejash.

Ushbu maqolada biz bitta elementda bir nechta fonni qo'llab-quvvatlaydigan kod sintaksisini ko'rib chiqamiz. Bu haqiqiy hayotda qanday ko'rinadi:

Bir nechta fon uchun CSS kodi

Bir nechta fon tasvirlari bir nechta qiymatlar yordamida amalga oshiriladi css parametri koma bilan ajratilgan fon:

#multipleBGs (fon: url(photo1.png), url(photo2.png), url(photo3.png); fon-takrorlash: takrorlanmaslik, takrorlashsiz, takrorlash-y; fon pozitsiyasi: 0 0, 30px 70px, oʻng tomonda; kenglik: 400px; balandlik: 400px; chegara: 1px qattiq #ccc; )

Qisqa kod bilan ham xuddi shunday qilishga harakat qildim. Afsuski, u ishlamayapti.

Bundan tashqari, siz boshqa fon xususiyatlaridan foydalanishingiz mumkin (fon-ilova, fon-klip, fon-tasvir, fon-kelib chiqishi, fon-pozitsiyasi, fon-takrorlash, fon-oʻlchami). CSS gradientlari bilan bir xil.

Ana xolos! Umid qilamanki, sizga hech qanday yordamchi elementlardan foydalanmasdan bir nechta fon yaratish texnikasi yoqdi. Sof semantik kod.

Agar sizda bir nechta fon yaratish uchun ushbu texnika haqida savollaringiz, sharhlaringiz yoki takliflaringiz bo'lsa, sharhlarda yozing. Bundan tashqari, men sinovdan o'tmoqchiman

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

Fon tarkibi

Orqa fonda bir nechta rasm yaratishni xohlashingizning ko'p sabablari bor, ulardan eng muhimi:

• Agar alohida rasmlarning og'irligi tekislangan qatlamli tasvirga qaraganda kamroq bo'lsa, 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 muammo qanday hal qilinadi? Bu juda oddiy: har bir fon tasviri uchun tegishli fon tasviri tayinlangan blok yaratiladi. Bloklar bir-birining ichiga joylashtiriladi yoki tegishli joylashtirish qoidalariga ega bo'lgan qatorga joylashtiriladi. Mana oddiy misol:

"Suv parisi" ichida "baliq ovlash" sinfiga ega blok faqat ko'rgazmali maqsadlar uchun mo'ljallangan.

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 uchta uyali fon va "fon" bloklari yonida joylashgan baliqli bitta blok mavjud. Nazariy jihatdan, baliqlarni, masalan, JavaScript yoki CSS3 Transitions/Animations yordamida ko'chirish mumkin.

Aytgancha, bu ".fishing" misolida CSS3 da belgilangan fon joylashuvi uchun yangi sintaksis 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 baliqni ushlay olmaydi.

Bir nechta fon

CSS3-ga qo'shilgan yangi variant yordamga keladi - bitta element uchun bir nechta fon tasvirlarini aniqlash qobiliyati. Bu shunday ko'rinadi:

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

Natija aynan bir xil:

Bitta qoida

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

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

Natijaning rasmini ko'rsatmayman - ishoning, bu yuqoridagi ikkita rasmga to'g'ri keladi. Ammo yana uslublarga e'tibor bering, ayniqsa "fon-takrorlash" - spetsifikatsiyaga ko'ra, agar ro'yxat oxiridagi qism yo'q bo'lsa, brauzer tasvirlar soniga mos kelish uchun ko'rsatilgan ro'yxatni kerakli miqdordagi takrorlashi kerak. ro'yxatda.

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

Hatto qisqaroq

Agar CSS 2.1 ni eslasangiz, u fon tasvirlarini qisqa shaklda tasvirlash qobiliyatini belgilab berdi. Bir nechta tasvir haqida nima deyish mumkin? Bu ham mumkin:

Namuna4 .dengiz (balandlik:300px; eni:480px; joylashuv: nisbiy; fon: url("media/fishing.svg") yuqori oʻng 10px takrorlanmaydi, url("media/mermaid.svg") pastki chap takror-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 mos kelmasa). Aytgancha, agar siz fon tasvirining rangini o'rnatmoqchi bo'lsangiz, bu oxirgi qatlamda bajarilishi kerak.

Dinamik tasvirlar

Agar kompozitsiya konteyner hajmiga qarab statik yoki dinamik bo'lsa, unda bir nechta fon 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 hayotdan bir misol - Yandex-da karahindiba bilan mavzu:


Agar siz kodni ko'rib chiqsangiz, 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 aylanadi 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 dinamikani qanday qo'shish mumkin? Bunday vaziyatda brauzer ichki ko'rinishda fon tasvirlarining individual parametrlarini tegishli qoidalarga muvofiq taqsimlashi qulay bo'lib chiqadi. Masalan, joylashishni aniqlash uchun "fon pozitsiyasi" mavjud va siljishlar uchun faqat buni o'zgartirish kifoya. Biroq, bir nechta rasmlardan foydalanishning narxi bor - bu qoida (va shunga o'xshash har qanday) blokingiz uchun belgilangan barcha fonlar uchun pozitsiyani ro'yxatga olishni talab qiladi va siz buni tanlab qila olmaysiz.

Bizning baliq fonimizga animatsiya qo'shish uchun siz quyidagi koddan foydalanishingiz mumkin:
$(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; animationLoop() funksiyasi ( 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(animationLoop); ) animationLoop(); )))
Qayerda
window.requestAnimFrame = (funksiya () ( qaytish window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (funksiya (funksiya.0,0Time) );))) )))();

Aytgancha, animatsiyalar CSS3 Transitions/Animations yordamida ham amalga oshirilishi mumkin, ammo bu alohida muhokama uchun mavzu.

Parallaks va interaktivlik

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

Bunday stsenariylarda bir nechta fon rasmlari foydali bo'ladi, chunki biz faqat fon haqida gapirganda (kontent haqida emas), ulardan foydalanish HTML kodini va DOMni ifloslantirmaslikka imkon beradi. Ammo hamma narsa o'z narxiga ega: nom, id, sinf yoki boshqa parametrlar bo'yicha individual kompozitsiya elementlariga kira olmayman. Men koddagi kompozitsiyadagi elementlarning tartibini aniq eslab qolishim kerak va har qanday elementning har qanday parametridagi har bir o'zgarish uchun, aslida, men barcha elementlar uchun ushbu parametrning qiymatlarini tavsiflovchi chiziqni yopishtirishim va uni yangilashim kerak. butun tarkibi.

Sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px, " + mermaidX + "px tub", + fishesX + "px " + fishesY + "px, chap yuqori";

Ishonchim komilki, bu qulay JavaScript kodiga o'ralgan bo'lishi mumkin, bu sahifaning html kodini iloji boricha toza qoldirib, individual qatlamlar bilan munosabatlarni virtualizatsiya qilish haqida g'amxo'rlik qiladi.

Muvofiqlik haqida nima deyish mumkin?

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

Bir nechta fonni qo'llab-quvvatlamaydigan brauzerlar uchun muqobil echimlarni taqdim etish uchun Modernizr-dan ham foydalanishingiz mumkin. Chris Coyier o'z postida bir nechta fondan foydalanganda qatlam tartibi haqida 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 foydalanishdan xavotirda bo'lsangiz, fonni ikki marta e'lon qilishingiz mumkin, ammo bu resurslarni ikki marta yuklash ko'rinishidagi kamchiliklarga ega (bu ma'lum bir brauzerda CSS-ni qayta ishlashni amalga oshirishga bog'liq):

/* bir nechta bg zaxirasi */ 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 u IE10 bilan bir xil dvigateldan foydalanadi.

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

Bugun biz fon xususiyati va uning qo'shimcha qiymatlari yordamida o'rnatiladigan fon tasvirlari ustida ishlaymiz. Keling, bir xil element uchun bir nechta fonni o'rnatishning bir nechta amaliy misollarini 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 bitta qator qoidalar qo'shish va shu bilan kerakli natijani olish. Biz buni lakonik variant deb hisoblashimiz mumkin, ayniqsa, bu yana bir bor kirish zaruratini yo'q qiladi manba kodi. Hammasi faqat CSS yordamida 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;/*agar fon rangi kerak boʻlsa*/ box-soya: 0 1px 2px rgba(0, 0, 0, 0.1); hoshiya: 100px avtomatik 15px; quti oʻlchami: chegara qutisi; toʻldirish: 25px; eni: 700px; min-balandlik: 300px; ) /*qisqartirilgan versiya*/ . 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; min. balandlik: 300px; )

Tushuntirish. Biz elementga uning joylashgan joyiga yo'lni ko'rsatuvchi fon tasvirini beramiz. Vergul bilan ajratilgan holda, yuqoridagi kodda ko'rinib turganidek, bizga yana ko'plab fonlarni kiritish imkoniyati beriladi. Ularning raqamlarining tartibi qaysi rasm boshqalarning tepasida bo'lishini aniqlaydi. Ya'ni, birinchi fon boshqalardan yuqori, keyin esa ketma-ketlik oddiy grafik muharrir printsipiga amal qiladi.

Keyinchalik, qo'shimcha parametrlar individual xususiyatlar orqali belgilanadi: joylashuv, takrorlash, o'lcham va kerak bo'lganda rang. Shuni ham yodda tutingki, barcha parametrlar vergul bilan ajratilgan, rasm raqami bilan bir xil tartibda yozilgan.

Va oxirgi tafsilot. Butun kodni faqat bitta umumiy xususiyatdan foydalanib qisqartirish mumkin, background . Kod misolida bu qanday amalga oshirilganligini ko'rsatadigan ikkinchi variant mavjud.

Pseudo element orqali fon tasviri

Shuningdek, unutmang muqobil variantlar psevdo-elementlar oldingi va keyingi kabi. Ulardan foydalanishda ijobiy afzallik bor - tasvir elementning chetidan tashqariga ko'chirilishi mumkin, shunda u chegarada yo'qolmaydi, balki uning tepasida bo'ladi. Agar siz 3D effekti kabi biror narsa yaratishingiz kerak bo'lsa, ushbu uslub foydali bo'ladi.

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

Tushuntirish. Aslida, hamma narsa juda oddiy. Biz fonni asosiy elementga odatiy tarzda o'rnatamiz. Keyinchalik asosiy xususiyat pozitsiyasi keladi: nisbiy; , bu asosiy elementda joylashgan va xossa pozitsiyasiga ega bo'lgan boshqa elementni ko'chirish maydonini belgilaydi:mutlaq; .

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