Сликите во позадина на телото се прават лесно
Убава карактеристика што ќе ја најдете на многу страници е местото каде што се чини дека централната содржина ја прекрива страницата со капка сенка зад неа. Тоа е всушност прилично едноставен метод за да го направите вашиот блог да изгледа убаво (или друга веб-страница) со единствена слика во позадина.
Како се прави?
- Дознајте колку е широка вашата содржина. Пример: 750px.
- Изградете слика во вашата апликација за илустрација (јас користам Илустратор) поширока од областа на содржината. Пример: 800px.
- Поставете ја позадината на сликата на позадината што сакате да ја имате на секоја страна од блогот.
- Додадете бел регион над позадината.
- Нанесете сенка на белиот регион што се истиснува од двете страни на регионот.
- Поставете ја областа за сечење ширина за 1 пиксел во висина. Ова ќе ја направи преземањето на сликата убаво и компактно за брзо прикажување.
- Излезете ја сликата.
Еве како го конструирав користејќи го Илустратор (забележете дека ја имам површината за земјоделски култури многу повисока… тоа е само за да можете да видите што правам):
Еве пример за тоа како би изгледал излезот со сликата во позадина:
Еве како да ја примените сликата користејќи ја ознаката за стил на тело во вашата
CSS датотека.позадина: # B2B2B2 url ('images / bg.gif') центар за повторување-y;
Еве дисекција на ознаката за стилот на позадината:
- # B2B2B2 - ја поставува целокупната боја на позадината на страницата. Во овој пример, сиво е да одговара на сивата на сликата во позадина.
- url ('images / bg.gif') - ја поставува позадинската слика што сакате да ја користите.
- повторување-y - ја поставува сликата да се повторува на оската y. Значи, сликата во позадина ќе се повтори од горниот до долниот дел на страницата.
- центар - ја поставува сликата во центарот на страницата.
Убава и лесна… една слика, една ознака за стилот!