Фоны (backgrounds) и градиенты

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

Пункты для размышления

  • Как задается цвет фона?
  • Какой цвет используется, когда элементы расположены стопкой один над другим (по оси z)?
  • Как задается частично прозрачный цвет? (rgba)
  • Где обычно используются градиенты в "реальных" сайтах?
  • Как задается градиентный фон?
  • Как фоном для элемента сделать изображение?
  • Почему полезнее задавать фоновое изображение для элемента, чем использовать обычный тэг <img>?
  • Как задать фоновое изображение фиксированного размера?
  • Как задать повторение фонового изображения?
  • Как сделать так, чтобы фоновое изображение страницы заполняло всю страницу даже при изменении размера браузера?

Задание:

  1. Прочитайте про фоны и градиенты у Шея Хау (Shay Howe).
  2. Просмотрите краткое руководство по фонам и градиентам от HTML Goodies.
  3. Прочитайте про фоны и градиенты в htmlbook на русском.

Поделиться уроком: