Опубликован: 06.10.2006 | Уровень: для всех | Доступ: платный
Лекция 16:

Фон

< Лекция 15 || Лекция 16: 12345 || Лекция 17 >

Мне не нравится, как повторяется фоновый рисунок

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

Некоторые графические программы имеют специальные функции, чтобы помочь вам замостить фон. В Adobe ImageReady, например, вы можете добавить фильтр Tile Maker, чтобы замостить рисунком весь фон.

Если повторение фонового рисунка приводит к проблемам, сделайте следующее.

  1. Если вы создали свой собственный фоновый узор, и у вас проблемы с тем, чтобы аккуратно его замостить, откройте его в своем графическом редакторе. Постарайтесь выровнять все края рисунка.

    Чтобы создать аккуратный фоновый узор, убедитесь, что края вашего рисунка одинаковы сверху и снизу, а также слева и справа

    увеличить изображение
    Чтобы создать аккуратный фоновый узор, убедитесь, что края вашего рисунка одинаковы сверху и снизу, а также слева и справа

    Чтобы края совпадали, скопируйте элемент с одного края рисунка и вставьте его с другого края. Вы можете создать рисунок в стиле калейдоскопа, сделав четыре копии своего рисунка и совместив их горизонтально и вертикально, аккуратно выравнивая края.

  2. Если ваш узор преимущественно состоит из областей сплошного цвета, сохраните или экспортируйте его в формате GIF. Если же это фотография или цвета градуированы, используйте JPEG.

Предотвращение повторения фонового рисунка

  1. Простейший способ избежать повторения фонового рисунка – сделать его достаточно большим, чтобы заполнить окно броузера. Откройте рисунок в графическом редакторе. Измените его размер как минимум до 1024 пикселей в ширину и 768 пикселей в высоту – максимального разрешения, используемого большинством компьютерных видеосистем. (В Photoshop нажмите Canvas Size в меню Image.) Неудобство в использовании больших рисунков заключается в том, что вы увеличиваете размер файла, и он будет загружаться медленнее. (О том, как уменьшить эту задержку, см. раздел "Файл с фоновым рисунком загружается слишком медленно".)
  2. Если рисунок не имеет фона или цвета границ, в Photoshop используйте инструмент заливки для заполнения новой области нужным вам фоновым цветом.
  3. Некоторые рисунки могут повторяться вниз по странице, но не поперек – например, тонкая полоска, заканчивающаяся разноцветным участком с левой стороны страницы.

    Перед сохранением такого рисунка установите его ширину как минимум на один пиксел больше 1024. (Или, если рисунок вертикальный, установите его высоту чуть больше высоты экрана.) Большая ширина рисунка предотвращает его повторение по горизонтали.

  4. Новые броузеры – те, которые поддерживают CSS – позволяют вам указывать, где повторять, а где не повторять фоновый рисунок. Используя стиль, вы можете не допустить повторения рисунка, даже если окно броузера больше изображения. Чтобы отобразить рисунок всего один раз, укажите в свойстве background-repeat тэга <BODY> значение no-repeat. Или если вы хотите, чтобы фон повторялся только в одном направлении, установите значение repeat-x (для повторения только поперек) или repeat-y (для повторения только вниз).

    <body background="bkgd.gif" style="background-repeat:no-repeat ">
    Этот рисунок имеет всего несколько пикселов в высоту, но, повторяясь, он заполняет весь экран. Он шире окна, поэтому не повторяется поперек

    увеличить изображение
    Этот рисунок имеет всего несколько пикселов в высоту, но, повторяясь, он заполняет весь экран. Он шире окна, поэтому не повторяется поперек
< Лекция 15 || Лекция 16: 12345 || Лекция 17 >
Татьяна Кондрашова
Татьяна Кондрашова
Россия
Игорь Воробьев
Игорь Воробьев
Россия, Михнево Ступинского МО