Loading

wait a moment

Внедрение фона на веб-страницу (Урок №9)



Любая веб-страница наделена фоном, который является либо картинкой, либо каким-то цветом. Фон создается в CSS. Фоном можно наделить всю страницу, либо конкретные его части.

 

1. Создание фонового цвета

Фон обозначается CSS-кодом background. Например, человек хочет желтый фон для сайта! В таком случае для тега <body> необходимо задать желтый цвет: body { background: yellow; }

Приведем пример:

Результат (нажимаем на картинку для увеличения)

 

2. Картинка в качестве фона

Любое изображение может стать фоном. Веб-мастеру чтобы добавить фоновую картинку нужно прибегнуть к помощи этого кода: background-image: url('адрес картинки');

Пример

Результат

Фон картинка

 

Фоновая картинка может повторяться или не повторяться.

  • background-repeat: repeat; – повторение по всей области страницы.
  • background-repeat: repeat-x; – картинка повторяется только по горизонтали.
  • background-repeat: repeat-y; – картинка повторяется только по длине экрана.
  • background-repeat: no-repeat; – картинка не повторяется

 

3. Сочетание нескольких цветов в фоне

Градиент – это плавная смена цветов на веб-странице. Задается градиент при помощи данного кода background: linear-gradient (позиционирование, цвета);

Пример

Результат

градиент фон

background: linear-gradient(to left, red, yellow, green); – цвета идут по горизонтали
background: linear-gradient(to top, red, yellow, green); – цвета идут с низу в верх.

red, yellow, green – это цвета, задействованные в градиенте. Красный, желтый и зеленый. Разработчик страницы может указать свои цвета для градиента.

Таким образом произвести фон можно при помощи градиента, картинки и одинарного цвета.



Подпишитесь на новости блога
Ваш e-mail: