Фотавыя малюнкі на целе зроблена лёгка

HTML

Прыемная асаблівасць, якую вы знойдзеце на многіх сайтах, - гэта тое, што ў цэнтры змесціва размешчана старонка з цень за ёй. Гэта на самай справе даволі просты спосаб зрабіць ваш блог прыгожым (ці іншым вэб -сайтам) з адным фонавым малюнкам.

Як гэта робіцца?

  1. Высветліце, наколькі шырокі ваш змест. Прыклад: 750 пікс.
  2. Стварыце малюнак у дадатку для ілюстрацый (я выкарыстоўваю Illustrator) шырэй, чым вобласць змесціва. Прыклад: 800 пікс.
  3. Усталюйце фон малюнка на фон, які вы хочаце мець з кожнага боку блога.
  4. Дадайце белы рэгіён на фоне.
  5. Вырабіце цень на белую вобласць, якая выдаляецца з абодвух бакоў вобласці.
  6. Усталюйце шырыню вобласці абрэзкі на 1 піксель у вышыню. Гэта зробіць малюнак загрузным прыемным і кампактным для хуткага адлюстравання.
  7. Вывесці малюнак.

Вось як я пабудаваў яго з дапамогай Illustrator (звярніце ўвагу, што ў мяне плошча ўраджаю значна вышэй ... гэта толькі для таго, каб вы маглі бачыць, што я раблю):
Фон з ілюстратарам

Вось прыклад таго, як будзе выглядаць выснова з фонавым малюнкам:
Прыклад фонавага малюнка

Вось як прымяніць малюнак з дапамогай тэга стылю цела ў сваім CSS файл.

фон: # B2B2B2 url ('images / bg.gif') паўтор-y цэнтр;

Вось разбор тэга стылю фону:

  • #B2B2B2 - задае агульны колер фону старонкі. У гэтым прыкладзе шэры колер адпавядае шэраму на фонавым малюнку.
  • url ('images/bg.gif') - устанаўлівае фонавы малюнак, якое вы хочаце выкарыстоўваць.
  • repeat-y - усталёўвае малюнак для паўтарэння па восі y. Такім чынам, фонавы малюнак будзе паўтарацца зверху ўніз старонкі.
  • цэнтр - усталёўвае малюнак у цэнтры старонкі.

Прыемна і проста ... адзін малюнак, адзін стыль!

2 Каментары

  1. 1
  2. 2

Што вы думаеце?

Гэты сайт выкарыстоўвае Akismet для барацьбы са спамам. Даведайцеся, як дадзеныя апрацоўваюцца каментар.