Дајте визуелен интерес на вашиот веб-сајт со позадина графика
Сликите се важен дел од атрактивните веб-дизајни. Ова вклучува употреба на слики во позадина. Ова се слики и графики кои се користат зад области на страница, за разлика од сликите кои се претставени како дел од страниците со содржина. Овие слики во позадина можат да видат визуелен интерес за страната и да ви помогнат да го постигнете визуелниот дизајн што можеби го барате на страница.
Ако почнете да работите со позадина слики, несомнено ќе се вклучи во сценарио каде што сакате сликата да се водат за да одговараат на страницата.
Ова е особено точно за одзив веб-сајтови кои се доставуваат до широк опсег на уреди и големината на екранот .
Оваа желба да се протега позадина сликата е многу честа желба за веб-дизајнери, бидејќи не секоја слика се вклопува во просторот на веб-страница. Наместо да поставите фиксна големина, растегнувањето на сликата му овозможува да се флека за да одговара на страницата, без разлика колку е широк или тесен прозорецот на прелистувачот .
Најдобар начин да се прошири сликата за да одговара на позадината на страница е да се користи CSS3 сопственост, за позадина големина. Еве еден пример кој користи позадинска слика за телото на страницата и која ја поставува големината до 100% така што секогаш ќе се протега за да се вклопи во екранот.
тело {
позадина: url (bgimage.jpg) нема повторување;
позадина-големина: 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 документ:
- Додајте ја сликата што сакате да биде позадина како прв елемент на веб-страницата и дајте му го името на "bg":
- Поставете ја сликата на позадината така што таа е фиксирана на врвот и лево и е 100% широк и 100% во висина. Додади го ова во вашиот лист со стил:
img # bg {
позиција: фиксна;
нагоре: 0;
лево: 0;
ширина: 100%;
висина: 100%;
} - Додадете ја целата содржина на страната во внатрешноста на елементот DIV со идентификација на "содржина". Додајте DIV под сликата:
Забелешка: интересно е да ја погледнете вашата страница сега. Сликата треба да се прикаже испружена, но вашата содржина целосно недостасува. Зошто? Бидејќи позадинската слика е 100% во висина, а поделбата на содржината е по сликата во протокот на документот - повеќето прелистувачи нема да го прикажат.Сите ваши содржини овде - вклучувајќи заглавија, ставови итн.
- Позиција на вашата содржина, така што е релативна и има z-индекс од 1. Ова ќе го донесе над сликата во позадина во прелистувачите што се компатибилни со стандардите. Додади го ова во вашиот лист со стил:
#содржина {
позиција: роднина;
z-индекс: 1;
}
- Но, не сте завршиле. Internet Explorer 6 не е усогласен со стандардите и има некои проблеми. Постојат многу начини да се скрие CSS од секој прелистувач, но IE6, но најлесниот (и најмалку најверојатно да предизвика други проблеми) е да користи условни коментари. Ставете ги следниве по вашиот стил во глава на вашиот документ:
- Внатре во означениот коментар, додадете друг стилски лист со некои стилови за да добиете убаво IE 6:
- Бидете сигурни дека за тестирање во IE 7 и IE 8, како и. Можеби ќе треба да ги прилагодите коментарите за да ги поддржите. Сепак, тоа работеше кога го тестирав.
Добро - ова е очигледно НАСОЧУВАЊЕ. Многу малку сајтови треба да го поддржат IE 7 или 8 повеќе, многу помалку IE6!
Како таква, овој пристап е застарен и веројатно непотребен за вас. Го оставам тука повеќе како модел на љубопитност за тоа колку многу потешки работи беа пред сите наши прелистувачи да играат толку убаво заедно!
Подигнување на испружената позадина во текот на помал простор
Можете да користите слична техника за лажен растргнат сликата на позадина преку DIV или друг елемент на вашата веб-страница. Ова е малку сложено бидејќи треба да користите апсолутно позиционирање или да имате чудни проред за други делови од вашата страница.
- Ставете ја сликата на страната што сакам да ја искористам како позадина.
- Во листот со стил, поставете ширина и висина за сликата. Забелешка, можете да користите проценти за ширина или висина, но ми е полесно да се прилагодите со должинските вредности за висината.
img # bg {
ширина: 20em;
висина: 30е;
} - Ставете ја вашата содржина во div со ид "содржина" како што беше погоре:
Сите твои содржини овде
- Стилите содржината div да биде иста ширина и висина како позадинската слика:
div # content {
ширина: 20em;
висина: 30е;
} - Потоа поставете ја содржината до иста висина како сликата. Значи, ако вашата слика е 30em ќе имате стил на врвот: -30em; Не заборавајте да поставите z-индекс од 1 на содржината.
#содржина {
позиција: роднина;
нагоре: -30em;
z-индекс: 1;
ширина: 20em;
висина: 30е;
} - Потоа додадете во z-индекс од -1 за IE 6 корисници, како што направивте погоре:
Повторно, со големина на позадина која ужива широка поддршка за прелистувачот што сега ја прави, овој пристап е, исто така, многу веројатно непотребен и претставен како производ од минатото време. Ако не сакате да го користите овој пристап, само бидете сигурни дека ќе го тестирате ова во што повеќе прелистувачи што можеш.
И ако вашата содржина ја промени големината, ќе треба да ја промените големината на вашиот контејнер и сликата во позадина, во спротивно, ќе завршите со чудни резултати.