Сибирский федеральный университет
Опубликован: 01.09.2010 | Доступ: свободный | Студентов: 3929 / 383 | Оценка: 4.08 / 3.78 | Длительность: 11:06:00
Лекция 6:

Изображения

Фоновые изображения

Представляют собой мощный механизм внесения разнообразия в визуальное представление страницы. Фоновое изображение (одно в CSS 2, и несколько в CSS 3) можно назначить практически любому блочному элементу - body, div, table, ul и т.д.:

background-image: url(файл);

Путь к файлу может быть, как обычно, абсолютным, относительным или корневым. По умолчанию изображение повторяется в обоих направлениях, заполняя всю площадь элемента, которому оно назначено. Дополнительные CSS-свойства позволяют управлять размещением изображения.

Свойство background-repeat определяет правило повтора: возможны значения no-repeat, repeat-x, repeat-y и repeat, смысл которых очевиден.

Свойство background-position определяет начальную позицию изображения. Для этого свойства требуется указать два значения - смещения по X и по Y от левого верхнего угла элемента. Значения могут быть заданы в любых единицах измерения CSS, а также ключевыми словами left, center, right (для указания горизонтальной позиции) и top, center, bottom (для вертикальных).

Ещё одно свойство - background-attachment - позволяет закрепить изображение в определённом месте окна браузера, сделав его независимым от прокрутки:

background-attachment:fixed;

Значение этого свойства по умолчанию - scroll (прокручиваться).

И, наконец, сокращённое свойство background позволяет указать сразу все перечисленные свойства фоновых изображений (а также background-color ):

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position]

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

body {
      padding-left: 100px;
      background-image: url(Texture.jpg);
      background-repeat: repeat-y;
    }
  ...
  <div>
    <h1>
      Заголовок 1 уровня</h1>
    <p>
      Фоновое изображение (одно в CSS 2, и несколько в CSS 3) можно назначить
      практически любому блочному элементу - body, div, table, ul и т.д.: background-image:
      url(файл);
    </p>
    <p>
      По умолчанию изображение повторяется в обоих направлениях, заполняя всю
      площадь элемента, которому оно назначено. Дополнительные CSS-свойства
      позволяют управлять размещением изображения. В данном примере изображение
      повторяется только по вертикали, поскольку задано свойство background-repeat:
      repeat-y.</p>
  </div>
Листинг 8.3. Фоновые изображения
Фоновые изображения

Рис. 8.3. Фоновые изображения
Упражнения.

Разместите фоновую текстуру горизонтальной полосой а) над текстом; б) под ним.

Создайте две горизонтальных полосы текстур - сверху и снизу текста. Для этого поместите в тело документа секцию, с полосой текстуры вверху; внутри этой секции - ещё одна секция с полосой текстуры внизу. Весь текст поместите во вложенную секцию.

Добейтесь того же эффекта, как и в предыдущем упражнении, заполнив внешнюю секцию текстурой полностью, а для внутренней установив фоновый белый цвет. Примерный вид результата см. на рис. 8.4.
Горизонтальные полосы текстур

Рис. 8.4. Горизонтальные полосы текстур

С фоновыми изображениями связан ряд трюков. Рассмотрим задачу создания специфической рамки (отличной от обычного прямоугольника) вокруг блочного элемента (рис. 8.5). В CSS 3 для этого есть встроенный механизм, а в CSS 2 - нет, поэтому нет альтернативы применению изображения. Чтобы предусмотреть возможные изменения в высоте элемента, вокруг которого создаётся рамка, изображение делится на две части, первая из которых размещается сверху блока, а вторая - снизу, так, что, блок, расширяясь, как бы раздвигает собой рамку. Но в CSS 2 нет и возможности назначить одному блоку два фоновых изображения (а в CSS 3 есть)! Поэтому блока должно быть тоже два, причём один вложен в другой.

div {
      background-image: url(rnd_bot.png);
      background-position: left bottom;
      background-repeat: no-repeat;
      width: 200px;
    }
    h3 {
      background-image: url(rnd_top.png);
      background-position: left top;
      background-repeat: no-repeat;
      margin: 0;
      padding: 12px;
      padding-bottom: 5px;
    }
    p {
      padding: 12px;
      padding-top: 0;
      margin: 0;
    }
  ...
  <div>
    <h3>
      Заголовок 3 уровня</h3>
    <p>
      Изображение разделено на две части, первая из которых назначена в качестве
      фона заголовку: background-image: url(rnd_top.png). Фон заголовка размещён
      слева вверху (background-position: left top) и без повтора (background-repeat:
      no-repeat).
    </p>
    <p>
      Нижняя часть изображения назначена фоном секции (в которую входят и заголовок,
      и абзацы). Оно позиционировано слева внизу и также без повтора.
    </p>
  </div>
Листинг 8.4. Создание рамки при помощи фоновых изображений
Создание рамки при помощи фоновых изображений

Рис. 8.5. Создание рамки при помощи фоновых изображений
Упражнения.

Попробуйте увеличивать и уменьшать количество текста в заголовке и в абзаце, чтобы выяснить границы применения рассматриваемого приёма.

Создайте новый HTML-документ с несколькими заголовками и абзацами. Нарисуйте от руки в редакторе Paint (или любом другом) волнистую горизонтальную линию небольшой длины. При рисовании постарайтесь, чтобы начальная и конечная точки находились примерно на одном уровне по вертикали, и чтобы кривая в этих точках имела примерно одинаковый наклон. Сохраните рисунок в формате png и при помощи CSS-правила для элемента заголовка поместите его в HTML-документ. Заголовки должны подчёркиваться линиями.

Изменение ширины блока очевидно, рассмотренным трюком не предусматривается. Однако, развивая идею, можно увеличить количество задействованных блоков и изображений до четырёх, что решает эту проблему.

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Георгий Агаджанян
Георгий Агаджанян
Северо-Кавказская академия государственной службы, 2010