Разпъване на цял екран фон с помощта на CSS, JQuery, PHP
Нашата цел е да осъзнаем мястото на фон (фон), която ще покрие цялата работна зона на прозореца на браузъра. Ние ще направим това чрез различни техники, които използват CSS3, чист CSS, JQuery, PHP.
Да се определи това, което искаме да се получи:
Пълен запълни картината прозорец, без интервали.
Стречинг фоново изображение, както е необходимо.
Съответствие с изображения пропорции.
Снимката трябва да бъде в центъра на града.
Тя трябва да бъде като крос-браузър.
И без да се пилее времето с флаш.
метод CSS3
Ние можем да се простират на фона на чист CSS, защото на имот фон-размер присъства в CSS3. Ще използваме HTML елемент, е по-добре от организма. тъй като тя винаги ще бъде равно на височината на прозореца на браузъра. Ние ще направим фиксирана фон и го постави в центъра на прозореца, тогава ние го разтегнете на цял екран с помощта на имот фон-размер.
Opera 10+ (Opera 9.5 поддържа фон размер но не поддържа ключови думи)
Stretch фона на чисто CSS
Направете фона на цял екран се използва чист CSS код, имате два метода. Не е изключение, че има и други.
Тук ние ще използваме IMG елемент. който ще бъде удължен до целия прозорец и ще изглежда по същия начин във всички браузъри. Ние поставяме мин височина. който ще запълни прозореца на браузъра вертикално. Също така, задаване на ширина до 100%, което ще запълни екрана хоризонтално. Ние също така да зададете мин ширина изображението, затова фон никога няма да бъде по-малко, отколкото сме се установи.
Особено сложен част от кода е да се използва заявката медии, за да се предотврати грешка, когато прозореца на браузъра е по-малка на фона на изображението. Също така, комбинираната употреба на отстъп на процента наляво. Това ви позволява да се запази на фона в центъра, без значение какво.
Всички версии на популярните браузъри: Safari / Chrome / Opera / Firefox
Internet Explorer 6: Най-малко на заден план остава фиксиран
IE 7/8: Много работа не е центрирана в малък мащаб, но тя изпълва екрана в най-добрия начин
Друг лесен начин за изпълнение на този, вмъкнете картинка в страницата. Той ще има фиксирана позиция и ще бъде поставен в горния ляв ъгъл. Ние го зададете мин ширина и височина мин на 100%. Можете също така трябва да се подготвят предварително на изображението, от гледна точка на съотношението на страните.
Въпреки, че този код не е в центъра на фоновото изображение. Така че сега ние имаме това правилно ... Ние можем да улавяне на изображението с помощта на това вземане на DIV.
Safari / Chrome / Firefox (не е тестван върху по-стари версии)
Opera (всички версии) и IE показва една и съща (лошо позициониране, аз не разбирам защо)
Stretch фон с JQuery
Тази идея се появи малко по-рано (като алтернативен метод CSS). Ако знаем, пропорциите и размерите на снимката, ще бъдем в състояние да се простират на фона на CSS. Ако картината е по-малък от прозореца на браузъра, ние ще се промени ширината до 100% от изображението. Ако има, можем само да зададете височина 100% и знам, че картината се попълнят както на ширина и височина.
Това не се реализира центриране, но можете да го направите с лекота.
И всички останали популярните браузъри
Опънете на заден план, използвайки PHP
Всъщност, PHP, ние можем да използваме за една цел: обработка на изображения с помощта на GD библиотеката. По-рано, аз говорих за това как да се направи скрипт изображения за визуализация. В този случай, тя може да се използва, за да промените размера на изображението в движение. Но има един проблем, изображението ще се генерира за всеки достъп до сайта. За голям проект, тя е твърде много ресурси. Би било по-добре да се направи готовия детайл на изображението, съответно, най-популярният Разделителна способност на екрана (1024 х 1280, 1280 х 800, ...), с помощта на Photoshop не е трудно. Ако резолюцията на екрана е различно, това са изолирани случаи, ние ще се свързва автоматично преоразмеряване скрипт. Той е свързан, както следва: