Как да направите множество CSS фонови изображения. Множество фонове и щрих с помощта на CSS2 Вмъкване на множество фонови изображения в css

Днес ще работим върху фонови изображения, които се задават с помощта на свойството background и неговите допълнителни стойности. Нека да разгледаме няколко практически примера за инсталиране на множество фонове за един и същ елемент.

Това може да бъде полезно в много случаи и моменти. Особено използването на псевдо елементи в този случай, тъй като те са много гъвкави в параметрите.

Много фонови изображения

За да не създавате блок в блок, най-лесният начин е да добавите един ред правила към основния елемент и по този начин да получите желания резултат. Можем да считаме това за лаконичен вариант, особено след като елиминира необходимостта отново да влизаме в изходния код. Всичко ще бъде направено само с помощта на CSS.

Blockimg( фон: url("img/img2.png"),/*най-горният фон и след това последователно*/ url("img/img3.png"), url("img/img1.jpg"); фонова позиция: 370px център, 120px 150px, център център;/*позиция на изображенията*/ background-repeat: no-repeat;/*повтаряне на картина*/ background-color: #444;/*ако е необходим фонов цвят*/ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); margin: 100px auto 15px; box-sizing: border-box; padding: 25px; width:700px; min-height: 300px; ) /*съкратена версия*/. blockimg ( фон: url("img/img2.png") без повторение 370px център, url("img/img3.png") без повторение 120px 150px, url("img/img1.jpg") без повторение център център; марж: 100px автоматично 15px; оразмеряване на полето: border-box; padding: 25px; width:700px; min-height: 300px; )

Обяснение.Даваме на елемента фоново изображение, което показва пътя до местоположението му. Разделени със запетаи, ни се дава възможност да въведем много повече фонове, както може да се види в кода по-горе. Редът на техните номера определя кое изображение ще бъде върху останалите. Тоест, първият фон е по-висок от всички останали, а след това последователността следва принципа на обикновен графичен редактор.

След това се задават допълнителни параметри чрез индивидуални свойства: позиция, повторение, размер и, ако е необходимо, цвят. Моля, имайте предвид също, че всички параметри се изписват разделени със запетаи, в същия ред като номера на снимката.

И една последна подробност. Целият код може да бъде съкратен, като се използва само едно общо свойство, background. В примерния код има втора опция, която показва как се прави това.

Фоново изображение чрез псевдо елемент

Също така не забравяйте за алтернативни опции, като псевдоелементите преди и след. Има положително предимство при използването им - изображението може да се премести отвъд ръба на елемента, така че да не изчезне на границата, а да е върху нея. Тази техника ще ви бъде полезна, ако трябва да създадете нещо като 3D ефект.

Blockimg( background: url("img/img1.jpg") no-repeat;/*element background*/ position:relative;/*positioning area*/ margin: 200px auto 15px; box-sizing: border-box; padding: 25px; width:700px; min-height: 300px; ) .blockimg::before( background: url("img/img1.png") no-repeat center center; bottom: 0; content: ""; height: 295px; ляво: 0; позиция: абсолютно;/*абсолютно позициониране*/ дясно: 0; горе: -150px; )

Обяснение.Всъщност всичко е много просто. Задаваме фона на основния елемент по обичайния начин. Следва ключовата позиция на собствеността: относителна; , който определя областта за преместване на друг елемент, който е в основния елемент и има свойството position:absolute; .

Вместо друг елемент, въпреки че формално той е отделна област, ние използваме псевдоелемент. Даваме му абсолютна позиция и го позиционираме на нужното ни място.

Можете да добавите множество фонови изображения към един елемент наведнъж чрез едно свойство на фона. Това ви позволява да използвате един елемент, за да създадете сложен фон или едно изображение, показвайки го няколко пъти с различни настройки. Всички изображения с техните параметри са изброени разделени със запетаи, като изображението, което се показва върху другите изображения, е посочено първо, а последното, съответно, най-долното изображение. Пример 1 показва как да създадете фон с три изображения.

Пример 1. Три фона

Ако трябва отделно да зададете някакво стилово свойство за фона, като размер на фона, както в примера по-горе, тогава параметрите за всеки фон са изброени, разделени със запетаи. Резултатът от този пример е показан на фиг. 1.

Ориз. 1. Фон с три изображения

Индивидуалните фонови изображения ви позволяват да променяте позицията им и също да ги анимирате, както е показано в пример 2.

Пример 2: Анимиран фон

Нека сега да разгледаме как да използваме една картина, за да създадем блок с рамка (фиг. 2). Ширината на блока е фиксирана, а височината варира в зависимост от обема на съдържанието на блока.

Ориз. 2. Ръчно рисувана рамка

Фигурата ясно показва горната и долната част, които трябва да бъдат изрязани в графичен редактор и разположени хоризонтално. Средната част е избрана така, че да се повтаря вертикално без шевове. Картината има подчертан повтарящ се модел, така че не би трябвало да има трудности при подчертаването му. Резултатът ще бъде готово изображение (фиг. 3). Карираното поле показва прозрачност; позволява ви да зададете цветен фон заедно с изображения и лесно да го променяте чрез стилове.

Ориз. 3. Изображение, подготвено за фон

Самият фон се показва от свойството background, което също така определя координатите на желания фрагмент. Параметрите на всеки фон са изброени разделени със запетаи и в този случай техният ред е от значение. Искаме горната и долната част на блока да не се припокриват, затова ги поставяме на първо място (пример 3). Цветът на фона се посочва последен.

Пример 3. Няколко фонови изображения

Първият фон показва горната граница на блока, вторият фон - долната, а третият - вертикалните граници. Последният е цветът, който се вижда в прозрачната централна част на блока (фиг. 4).

). Днес ще поговорим малко за друга интересна функция - използването на множество изображения във фонов режим.

Състав на фона

Има много причини, поради които може изобщо да искате да композирате няколко изображения във фонов режим, най-важните от които са:

• спестяване на трафик върху размера на изображенията, ако отделните изображения тежат по-малко от изображение със сплескани слоеве, и
• необходимостта от независимо поведение на отделните слоеве, например при прилагане на паралакс ефекти.

Може да има и други основателни причини :)

Класически подход

Така че трябва да поставим няколко фонови изображения едно върху друго. Как обикновено се решава този проблем? Много е просто: за всяко фоново изображение се създава блок, към който се присвоява съответното фоново изображение. Блоковете са или вложени един в друг, или поставени в ред с подходящи правила за позициониране. Ето един прост пример:

Блок с класа "риболов" вътре в "русалка" е само за демонстрационни цели.

Сега малко стилове:
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing (височина:300px; ширина:480px; позиция: относителна;) .sample1 .sea (фон: url(media/sea.png) repeat-x горе вляво;) .sample1 .mermaid ( фон: url(media/mermaid.svg) repeat-x долу вляво; ) .sample1 .fish (фон: url(media/fish.svg) no-repeat; височина:70px; ширина:100px; ляво : 30px; горе: 90px; позиция: абсолютна; ) .sample1 .fishing ( фон: url(media/fishing.svg) без повторение горе вдясно 10px; )

Резултат:

В този пример има три вложени фона и един блок с риба, разположени до „фоновите“ блокове. На теория рибата може да се мести, например, с помощта на JavaScript или CSS3 Transitions/Animations.

Между другото, този пример за ".fishing" използва новия синтаксис за позициониране на фона, също дефиниран в CSS3:
фон: url(media/fishing.svg) без повторение горе вдясно 10px;
В момента се поддържа в IE9+ и Opera 11+, но не се поддържа във Firefox 10 и Chrome 16. Така че потребителите на последните два браузъра все още няма да могат да хванат рибата.

Множество фонове

На помощ идва нова опция, добавена към CSS3 – възможност за дефиниране на множество фонови изображения за един елемент. Изглежда така:

И съответните стилове:
.sample2 .sea (височина:300px; ширина:480px; позиция: относителна; фоново изображение: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea. png"); фонова позиция: горе вдясно 10px, долу вляво, горе вляво; фоново повторение: без повторение, повторение-x, повторение-x;) .sample2 .fish ( фон: url("media/fish.svg) ") без повторение; височина:70px; ширина:100px; ляво: 30px; горе: 90px; позиция: абсолютна; )
За да дефинирате множество изображения, трябва да използвате правилото за фоново изображение, изброявайки отделните изображения, разделени със запетаи. Допълнителни правила, също списък, могат да задават позициониране, повторения и други параметри за всяко изображение. Обърнете внимание на реда, в който са изброени изображенията: слоевете са изброени отляво надясно от най-горния до най-долния.

Резултатът е абсолютно същият:

Едно правило

Ако рибата не трябва да се отделя в отделен блок за последващи манипулации, цялата картина може да бъде пренаписана с едно просто правило:

Стилове:
.sample3 .sea (височина:300px; ширина:480px; позиция: относителна; фоново изображение: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish. svg"), url("media/sea.png"); background-position: горе вдясно 10px, долу вляво, 30px 90px, горе вляво; background-repeat: no-repeat, repeat-x ; )

Няма да показвам снимка на резултата - повярвайте ми, съвпада с двете снимки по-горе. Но отново обърнете внимание на стиловете, особено на „фоново повторение“ - според спецификацията, ако част от списъка в края липсва, тогава браузърът трябва да повтори посочения списък необходимия брой пъти, за да съответства на броя на изображенията в списъка.

В този случай това е еквивалентно на това описание:
фоново повторение: без повторение, повторение-x, no-repeat, repeat-x;

Още по-кратко

Ако си спомняте CSS 2.1, той дефинира способността да се описват фонови изображения в кратка форма. Какво ще кажете за няколко изображения? Това също е възможно:

Sample4 .sea (височина:300px; ширина:480px; позиция: относителна; фон: url("media/fishing.svg") горе вдясно 10px без повторение, url("media/mermaid.svg") долу вляво repeat-x , url("media/fish.svg") 30px 90px no-repeat, url("media/sea.png") repeat-x; )

Но имайте предвид, че сега не можете просто да пропуснете стойности (освен ако не съответстват на стойността по подразбиране). Между другото, ако искате да зададете цвета на фоновото изображение, това трябва да се направи в последния слой.

Динамични изображения

Ако композицията е статична или динамична най-много в зависимост от размера на контейнера, тогава множеството фонове очевидно опростяват дизайна на страницата. Но какво ще стане, ако трябва да работите с отделни елементи от композицията независимо от javascript (преместване, превъртане и т.н.)?

Между другото, ето пример от живота - тема с глухарче в Yandex:


Ако погледнете в кода, ще видите нещо подобно:

...

Блокове с класове "b-fluff-bg", "b-fluff__cloud" и "b-fluff__item" съдържат фонови изображения, които се припокриват. Освен това фонът с облаци непрекъснато се превърта, а глухарчетата летят по екрана.

Може ли това да бъде пренаписано с помощта на множество фонове? По принцип да, но при условие че 1) се поддържа тази функция в целевите браузъри и... 2) прочетете;)

Как да добавите динамика към множество фонове? В такава ситуация се оказва удобно, че във вътрешното представяне браузърът разпределя индивидуалните параметри на фоновите изображения според съответните правила. Например за позициониране има “background-position”, а за смени е достатъчно да промените само това. Използването на множество изображения обаче има цена - това правило (и всяко подобно) изисква да посочите позицията за всички фонове, дефинирани за вашия блок, и не можете да правите това избирателно.

За да добавите анимация към нашия рибен фон, можете да използвате следния код:
$(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() ( fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) русалка X = 0; fishY = -10 + (10 * Math.cos(t * 0,091)); fishX = 10 + (5 * Math.sin(t * 0,07)); sea.style.backgroundPosition = "top" + fishY + "px дясно" + fishX + "px, " + mermaidX + "px bottom," + fishesX + "px" + fishesY + "px, горе вляво"; window.requestAnimFrame(animationLoop); ) animationLoop(); ));
Където
window.requestAnimFrame = (function() ( return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (function(callback) ( window.setTimeout(callback, 1000 / 60) ); )); ))();

И между другото, анимациите могат да се правят и с помощта на CSS3 Transitions/Animations, но това е тема за отделна дискусия.

Паралакс и интерактивност

И накрая, подобни маневри могат лесно да добавят паралакс ефекти или интерактивно взаимодействие с фона:

Множеството фонови изображения са полезни в такива сценарии, тъй като макар да говорим само за фона (а не за съдържанието), използването им ни позволява да избегнем разхвърлянето на html кода и DOM. Но всичко си има цена: нямам достъп до отделни композиционни елементи по име, идентификатор, клас или друг параметър. Трябва изрично да запомня реда на елементите в композицията в кода и за всяка промяна във всеки параметър на който и да е елемент, всъщност трябва да слепя ред, описващ стойностите на този параметър за всички елементи и да го актуализирам за цялата композиция.

Sea.style.backgroundPosition = "top" + fishY + "px дясно" + fishX + "px, " + mermaidX + "px bottom," + fishesX + "px" + fishesY + "px, горе вляво";

Сигурен съм, че това може да бъде опаковано в удобен javascript код, който ще се погрижи за виртуализацията на връзките с отделните слоеве, като същевременно остави html кода на страницата възможно най-чист.

Какво ще кажете за съвместимостта?

Всички съвременни версии на популярни браузъри, включително IE9+, поддържат множество изображения (можете да проверите, например, Caniuse).

Можете също да използвате Modernizr, за да предоставите алтернативни решения за браузъри, които не поддържат множество фонове. Както пише Крис Койър в публикацията си за реда на слоевете, когато използвате множество фонове, направете нещо подобно:

Multiplebgs body ( /* Страхотни множество BG декларации, които надхвърлят реалността и imsourcess chicks */) .no-multiplebgs body ( /* laaaaaame резервен вариант */)
Ако сте загрижени относно използването на JS за осигуряване на обратна съвместимост, можете просто да декларирате фон два пъти, въпреки че това също има своите недостатъци под формата на възможно двойно зареждане на ресурси (това зависи от изпълнението на обработката на css в конкретен браузър):

/* множество bg резервни */ фон: #000 url(...) ...; /* Страхотни многобройни BG декларации, които надхвърлят реалността и мацките без източник */ фонов url(...), url(...), url(...), #000 url(...);

Ако вече сте започнали да мислите за Windows 8, имайте предвид, че можете да използвате множество фонове, когато разработвате приложения в стил метро, ​​тъй като той използва същия двигател като IE10.

P.s. По темата: Не мога да не си спомня феноменалната статия за

Когато говорихме за свойството background-image в началото на този раздел, не споменахме една функция: в CSS3 можете да добавите множество фонове към един елемент, като просто ги изброите, разделени със запетаи. Това е особено необходимо, когато елемент с фон има променлива ширина или височина и фонът трябва да се адаптира към неговия размер.

Как да зададете множество фонове в CSS

Ще ви покажем пример, който може да ви бъде полезен на практика. Нека си представим, че трябва да поставим блок от текст в рамка. Рамката е графичен файл в PNG формат:

В този проблем височината на текста не ни е известна - не знаем дали текстът ще се побере изцяло в рамката или ще излезе извън нея. Поради това неизвестно количество не можем да рискуваме да използваме оригиналния дизайн на рамката като фон. Но с CSS можем да накараме тази граница да се разшири, когато е необходимо. За да направите това, ще трябва да разделите оригиналния чертеж в графичен редактор на три части - горна, долна и средна - и да запишете всеки файл поотделно. Като този:

Горна част на рамката

Долната част на рамката

Средата на рамката

Ще направим фон с изображение на средата на рамката, повтарящо се по оста Y, докато горната и долната част на рамката няма да бъдат дублирани. Нека добавим и трите фона към елемента и също така да запишем други необходими стилове:

Рамка ( фоново изображение: url(https://goo.gl/tKyzHt), /* горната част на рамката */ url(https://goo.gl/SUKymM), /* долната част на рамката */ url( https: //goo.gl/Km7HVV); /* средата на рамката */ background-position: център отгоре, /* позиция на горната част на рамката */ център отдолу, /* позиция на дъното на рамката * / център отгоре; /* позиция на средата на рамката */ фон -повтаряне: без повторение, /* горната част на рамката не се повтаря */ без повторение, /* долната част на рамката не се повтаря * / repeat-y; /* средата на рамката се повтаря вертикално */ background-size: contain; /* тук всички фонове имат една и съща стойност */ height: auto; /* височината на блока зависи от количеството съдържание * / ширина: 400px; /* ширината на блока е фиксирана */ подложка: 30px; /* вътрешна подложка на блок */ )

Всеки фон трябва да бъде разделен със запетая и само след последния се поставя точка и запетая, за да се посочи краят на декларацията. За удобство и по-добра четливост на кода препоръчваме да посочите всеки URL на нов ред.

Фоновите картинки се поставят на принципа на слоевете - една под друга. Фонът, посочен първи, ще бъде на горния слой, вторият фон ще бъде под първия, а третият ще бъде под първите два. Ето защо поставихме картината така, че средата на рамката да е в самия край – така че да не застъпва горната и долната част.

След това кодът задава свойствата background-position и background-repeat за всеки фон (същия ред, в който са подредени фоновите изображения). Да, познахте правилно: ако е необходимо, тогава можете да посочите стойностите на други свойства на фона, разделени със запетаи. И ако трябва да приложите една стойност към всички фонове, вие я пишете както обикновено (в нашия случай, свойството background-size: contain).

Е, нека да разгледаме резултата:

Както можете да видите, рамката е позиционирана правилно и сега красиво рамкира съдържанието на блока. Какво се случва, ако увеличим количеството текст в блока? Нека видим:

Средната част на нашата рамка беше дублирана вертикално необходимия брой пъти, сякаш се разтягаше по дължина и се приспособяваше към текста. Това е ефектът, който не би могъл да се реализира, ако използваме плътно изображение на рамката. Нека добавим още текст за яснота:

Разбира се, множество фонове могат да се използват за решаване на други проблеми. Показахме само един пример от многото. Опитайте се да измислите своя собствена ситуация и се упражнявайте да използвате група фонови картинки.

Използване на стенографско обозначение

Свойството фон също приема множество стойности. В случай на използване на няколко фона, съкратеният запис може да бъде много по-удобен, тъй като е по-трудно да се объркате. Нека преработим нашия код за рамката:

Фон: url(https://goo.gl/tKyzHt) център отгоре / съдържа без повторение, /* горната част на рамката */ url(https://goo.gl/SUKymM) център отдолу / съдържа без повторение, / * долна част на рамката */ url(https://goo.gl/Km7HVV) център горе / съдържа повторение-y; /* средата на рамката */

Тази опция изглежда по-малко тромава и е по-лесна за разбиране.