Вы здесь: Главная > CSS > Фоновые изображения

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

Опубликовано автором Просмотры: 9

Фоновые изображения CSS используются совсем не так, как HTML-элемент img. Они являются мощным способом добавления подробного представления на страницу.

Свойство shorthand может обрабатывать все основные аспекты работы с фоновыми изображениями background.

body {
    background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}

Это объединяет эти свойства:

background-color, с которыми мы сталкивались раньше.

background-image, который является местоположением самого изображения.

background-repeat именно так изображение повторяется. Его значение может быть:

repeat, эквивалент эффекта “плитки” по всему фону,

repeat-y, повторяющиеся по оси y, сверху и снизу,

repeat-x (повторяющиеся по оси x, бок о бок), или

no-repeat (на котором показан только один экземпляр изображения).

background-position, которые могут быть top, center, bottom left, right, top right,

background images

Расположенный в правом верхнем углу неповторяющийся фон.

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

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

Страницы в тему:

Примеры CSS:

Добавить комментарий