|
CSS Урок 5 Фон
CSS свойства фона используются для определения фоновых эффектов элемента.
Свойства CSS, используемые для установки фона:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Цвет ФонаСвойство background-color указывает цвет фона элемента.
Цвет фона страницы определяется селектором body:
Примерbackground-color:#b0c4de;
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
В CSS цвет чаще всего указывается с помощью:
- шестнадцатеричного (HEX) значения - например "#ff0000"
- RGB значения - например "rgb(255,0,0)"
- имени цвета - например "red"
Зайдите в справочник CSS Значений Цветов, чтобы посмотреть полный
список допустимых значений цветов.
В примере ниже, элементы h1, p, и div имеют различные фоновые цвета:
Примерh1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Фоновое ИзображениеСвойство background-image указывает изображение в качестве фона элемента.
По умолчанию, изображение повторяется так, что оно покрывает элемент полностью.
Фоновое изображение для страницы может быть установлено например так:
Примерbody {background-image:url('paper.gif');}
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Ниже пример плохого сочетания текста и фонового изображения. Текст почти невозможно прочитать:
Примерbody {background-image:url('bgdesert.jpg');}
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Фоновое Изображение - Повторение по Горизонтали или по ВертикалиПо умолчанию, свойство background-image повторяет изображение как по горизонтали, так и по вертикали.
Некоторые изображения должны повторяться только по горизонтали или только по вертикали, или они
будут выглядеть странно, например так:
Примерbody
{
background-image:url('gradient2.png');
}
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Если изображение повторяется только по горизонтали (repeat-x),то фон будет выглядеть лучше:
Примерbody
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Фоновое Изображение - Установка положения картинки и запрет повторения Когда вставляете фоновое изображение, не используйте картинку, которая ухудшает читабельность текста.
Вывод изображения один единственный раз (без повторения) устанавливается с помощью свойства background-repeat:
Примерbody
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
В примере выше, фоновое изображение показано в том же месте, что и текст. Мы хотим изменить положение картинки
так, чтобы не ухудшать читабельность текста чересчур.
Положение картинки указывается с помощью свойства background-position:
Примерbody
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Фоновое Изображение - Стенографическое свойствоКак вы можете видеть из примеров выше, когда мы имеем дело с фоном, требуется
задавать много свойств.
Чтобы сократить код, можно указать все свойства в одном единственном свойстве. Оно называется стенографическое свойство.
Стенографическое свойство для фона - это просто "background":
Примерbody
{
background:#ffffff url('img_tree.png') no-repeat right top;
margin-right:200px;
}
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
При использовании стенографического свойства порядок значений свойств следующий:
- background-color (цвет фона)
- background-image (фоновое изображение)
- background-repeat (повторение)
- background-attachment (пристыковка)
- background-position (положение)
Не имеет значения, если одно из значений пропущено, если те, которые присутствуют, идут в таком порядке.
Этот пример использует более продвинутый CSS. Посмотрите:
Продвинутый пример
 |
Еще примеры |
Как установить фиксированное фоновое изображение
Этот пример демонстрирует как установить фиксированное фоновое изображение. Это изображение не будет прокручиваться вместе со страницей.
Все Фоновые Свойства CSS
|
