Прецизно позициониране на образа на дадена уеб страница

В момента приемат поръчки временно спряно. Извиняваме се за причиненото неудобство.

MLA ArtWebMaster студио е развитието и създаването на обекти в Ростов на Дон.

Ние също така сме ангажирани в създаването на компоненти, модули и плъгини за CMS Joomla.

Вашият сайт е статичен? Ние можем да го преместите на CMS Joomla и ще получите бърз динамичен уеб сайт.

Няма достатъчно време, за да се справят със сайта? Ние се ангажираме да подкрепят работата и сайтове за поддръжка.

В някои случаи, уеб администраторите да създават сайтове или уеб страници, оформление и шаблони са изправени пред ситуация, в която трябва да поставите на снимката точно на правилното място на страницата, за да го приведе в съответствие с фона на изображението. Например, ние сме изготвянето на дизайна на началната страница и в тази цифра е такъв фрагмент:

Фрагмент дизайн дизайн страница.

Ние трябва да "рязани" образа на отделни изображения, и то точно копие на сайта на страница, създадена да направи. Внимателно огледа по-близо до фрагмент дизайн, можем да видим, че:

  1. Фонът се състои от повтарящ се израз, така че може да се реже по отделно и да направи фон Разделение маркер или ТД на.
  2. Логото има заден polupozrachnuyu плавно затихване сянка, така че не може да се реже точно на ръба, и че е необходимо да улови някои от фона.

В резултат на това ние се две изображения:

Снимка 2.
Лого с част от фона.

Сега трябва да бъдат поставени на една страница на сайта и да се съчетаят с пиксел точност. Има много начини да направите това:

  1. Направете една маса и го нарежете на клетката, опитайте се да комбинирате ръба на снимката 2 с фона;
  2. Използването от един пиксел прозрачен GIF файл 2 може да се движи на изображението надолу и надясно;
  3. Вместо прозрачен GIF файл може да се използва поле, образувана с DIV тагове;
  4. И така нататък.

Можете да излезе с доста възможности за изпълнението на подобен проблем, но искам да Ви предложим най-, по мое мнение, по-прост и ефективен начин да се позиционира точно картинката вътре в маркер. Тя се състои в предписване рамките стил таг IMG, в които ние си поставихме за офсетов изображението по-горе и на ляво. Html изображение код ще изглежда така:

Фоново изображение Да предположим, например, DIV таг. въпреки че е възможно и TR - това е, колкото искате. Резултатът е:

Ето как ще изглежда така:

Комбиниран фоново изображение и лого.

Всички много добре - на снимката получава точно там, където е трябвало да бъде и това, което ние е необходимо.

Използвайки този метод, за прецизно позициониране на изображения само трябва да промените стойността подложка ляв (отстъп снимките вляво) на запълване на върха (горно поле снимки).

Сега, няколко важни забележки:
  1. Трябва да се разбере, че маркерът във вътрешността на който е поставена снимката, трябва или да бъде фиксирано предварително определена височина и ширина (с помощта на ширина и височина), или на снимката трябва да бъде "поставен" в началото и лявата страна на етикет (таг ТД се извършва с чрез valign и подравняване). В идеалния случай трябва да направите и двете.
    Ако това не бъде направено, картината може да "се придвижи надолу" от мястото си, в зависимост от околните тагове, околния текст и изображения. Може да сте виждали такива сайтове, в които преходът от страница на страница, графикът започва да "разпръсне".
  2. В примера, описан по-горе, стилове поставят в маркерите. Не е необходимо и се извършва само за яснота. По принцип те могат да направят отделен CSS стил лист файл.

Ето цялата мъдрост. Както можете да видите, нищо сложно по този начин там, но тя изпълнява задачата добре.

Желая ти късмет и успех в уеб програмирането!