Дайте на уебсайта ви визуален интерес с фон графики
Изображенията са важна част от атрактивния дизайн на уеб сайтове. Това включва използването на фонови изображения. Това са изображенията и графиките, които се използват зад зоните на страницата, за разлика от изображенията, които се представят като част от съдържателните страници. Тези фонови изображения могат да добавят визуален интерес към страница и да ви помогнат да постигнете визуалния дизайн, който може да търсите в дадена страница.
Ако започнете да работите с фонови изображения, без съмнение ще се впуснете в сценария, където искате изображението да се простира, за да се побере в страницата.
Това е особено вярно за отзивчивите уеб сайтове, които се доставят на широка гама от устройства и размери на екрана .
Това желание да се простира фонов образ е много често желание за уеб дизайнери, защото не всяко изображение се вписва в пространството на уебсайт. Вместо да зададете фиксиран размер, разтягането на изображението му позволява да се огъва, за да се побере в страницата, независимо колко широк или тесен е прозорецът на браузъра .
Най-добрият начин да разтегнете изображение, така че да се побере на фона на дадена страница, е да използвате собствеността CSS3 за размер на фона. Ето един пример, който използва фоново изображение за тялото на страницата и което определя размера до 100%, така че тя винаги да се простира, за да се побере на екрана.
тяло {
фон: url (bgimage.jpg) no-repeat;
размер на фона: 100%;
}
Според caniuse.com тази собственост работи в IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ и във всички основни мобилни браузъри. Това ви обхваща всички съвременни браузъри, които са на разположение днес, което означава, че трябва да използвате тази собственост, без да се страхувате, че няма да работи на екрана на някого.
Създаване на захванати фона в по-стари браузъри
Много е малко вероятно да се нуждаете от поддръжка на браузъри, по-стари от IE9, но нека приемем, че сте загрижени, че IE8 не поддържа тази собственост. В този случай можете да фалшифицирате разтегнат фон. Можете да използвате и префикси на браузъра за Firefox 3.6 (-moz-background-size) и Opera 10.0 (-o-background-size).
Най-лесният начин да фалшифицирате изтеглено фоново изображение е да го разпънете на цялата страница. След това не свършвате с допълнително пространство или трябва да се притеснявате, че вашият текст се вписва в разтегнатия участък. Ето как да го направите:
id = "bg" />
- Първо, уверете се, че всички браузъри имат 100% височина, 0 полета и 0 подложка върху елементите и HTML BODY. Поставете следното в заглавието на вашия HTML документ:
- Добавете изображението, което искате да бъде фонът, като първи елемент на уеб страницата и му дадете id на "bg":
- Поставете фоновото изображение така, че да е фиксирано отгоре и отляво и е 100% широко и 100% високо. Добавете това към стиловия лист:
img # bg {
позиция: фиксирана;
горе: 0;
ляво: 0;
ширина: 100%;
височина: 100%;
} - Добавете цялото си съдържание към страницата вътре в елемента DIV с идентификатор на "съдържание". Добавете DIV под изображението:
Забележка: Интересно е да погледнете страницата си сега. Изображението трябва да е опъната, но съдържанието ви напълно липсва. Защо? Тъй като фоновото изображение е 100% по-високо, разделянето на съдържанието е след изображението в потока на документа - повечето браузъри няма да го покажат.Цялото съдържание тук - включително заглавия, абзаци и др.
- Поставете съдържанието си така, че да е относително и да има z-индекс от 1. Това ще го донесе над фоновото изображение в съвместими със стандартите браузъри. Добавете това към стиловия лист:
#content {
позиция: относителна;
z-индекс: 1;
}
- Но не сте готови. Internet Explorer 6 не отговаря на стандартите и все още има някои проблеми. Има много начини да скриете CSS от всеки браузър, но IE6, но най-лесният (и най-малко вероятно да причини други проблеми) е да използвате условни коментари. Поставете следното след стиловата ви таблица в заглавието на документа:
- Вътре в осведомения коментар добавете друг стилов лист с някои стилове, за да получите IE 6, за да играете хубаво:
- Не забравяйте да тествате в IE 7 и IE 8 също. Може да се наложи да коригирате коментарите и да ги поддържате. Въпреки това, тя работи, когато я тествах.
Добре - това е непременно WAY overkill. Много малко сайтове трябва да поддържат IE 7 или 8 вече, много по-малко IE6!
Като такъв, този подход е остарял и вероятно ненужен за вас. Оставям го тук повече като модел на любопитство, колко много по-трудни бяха преди всичките ни браузъри да играят толкова добре заедно!
Заснемане на разтегано фоново изображение върху по-малко пространство
Можете да използвате подобна техника, за да фалшифицирате изтеглено фоново изображение в DIV или друг елемент на уеб страницата си. Това е малко по-трудно, тъй като трябва да използвате или абсолютно позициониране, или да имате странни проблеми с разстоянието за други части на страницата си.
- Поставете изображението на страницата, която искам да използвам като фон.
- В стиловия лист задайте ширина и височина на изображението. Забележете, че можете да използвате проценти за ширина или височина, но за мен е по-лесно да се коригира с дължината на височината.
img # bg {
ширина: 20мм;
височина: 30мм;
} - Поставете съдържанието си в "div" с идентификационното "съдържание", както направихме по-горе:
Цялото съдържание тук
- Стил на съдържание div да бъде същата ширина и височина, както и фоновото изображение:
div # съдържание {
ширина: 20мм;
височина: 30мм;
} - След това поставете съдържанието до същата височина, както изображението. Така че, ако вашият образ е 30em, ще имате стил на върха: -30em; Не забравяйте да поставите z-индекс от 1 на съдържанието.
#content {
позиция: относителна;
горе: -30em;
z-индекс: 1;
ширина: 20мм;
височина: 30мм;
} - След това добавете z-индекс от -1 за IE 6 потребители, както направихте по-горе:
Отново, с размерите на фона, които се радват на широката подкрепа на браузъра си, сега този подход също е много ненужен и е представен като продукт на някогашна ера. Ако искате да използвате този подход, трябва само да проверите това в толкова браузъри, колкото можете.
И ако съдържанието ви промени размера, ще трябва да промените размера на контейнера и фоновото си изображение, в противен случай ще приключите със странни резултати.