Сликите во позадина на телото се прават лесно

HTML

Убава карактеристика што ќе ја најдете на многу страници е местото каде што се чини дека централната содржина ја прекрива страницата со капка сенка зад неа. Тоа е всушност прилично едноставен метод за да го направите вашиот блог да изгледа убаво (или друга веб-страница) со единствена слика во позадина.

Како се прави?

  1. Дознајте колку е широка вашата содржина. Пример: 750px.
  2. Изградете слика во вашата апликација за илустрација (јас користам Илустратор) поширока од областа на содржината. Пример: 800px.
  3. Поставете ја позадината на сликата на позадината што сакате да ја имате на секоја страна од блогот.
  4. Додадете бел регион над позадината.
  5. Нанесете сенка на белиот регион што се истиснува од двете страни на регионот.
  6. Поставете ја областа за сечење ширина за 1 пиксел во висина. Ова ќе ја направи преземањето на сликата убаво и компактно за брзо прикажување.
  7. Излезете ја сликата.

Еве како го конструирав користејќи го Илустратор (забележете дека ја имам површината за земјоделски култури многу повисока… тоа е само за да можете да видите што правам):
Позадина со Илустратор

Еве пример за тоа како би изгледал излезот со сликата во позадина:
Пример за слика во позадина

Еве како да ја примените сликата користејќи ја ознаката за стил на тело во вашата CSS датотека.

позадина: # B2B2B2 url ('images / bg.gif') центар за повторување-y;

Еве дисекција на ознаката за стилот на позадината:

  • # B2B2B2 - ја поставува целокупната боја на позадината на страницата. Во овој пример, сиво е да одговара на сивата на сликата во позадина.
  • url ('images / bg.gif') - ја поставува позадинската слика што сакате да ја користите.
  • повторување-y - ја поставува сликата да се повторува на оската y. Значи, сликата во позадина ќе се повтори од горниот до долниот дел на страницата.
  • центар - ја поставува сликата во центарот на страницата.

Убава и лесна… една слика, една ознака за стилот!

2 Коментари

  1. 1
  2. 2

Што мислите?

Оваа страница користи Akismet за намалување на спам. Научете како се обработува вашиот коментар.