Последние учебники веб-разработки
×

CSS Руководство

CSS ГЛАВНАЯ CSS Введение CSS Синтаксис CSS Как CSS Цвета CSS Фон CSS Границы CSS Маржа CSS набивка CSS Высота ширина CSS Текст CSS шрифты CSS связи CSS Списки CSS таблицы CSS Модель Бокса CSS Outline CSS Дисплей CSS Максимальная ширина CSS Позиция CSS терка CSS Inline-block CSS выравнивать CSS Комбинаторы CSS Псевдо-класс CSS Псевдо-элемент CSS Панель навигации CSS Dropdowns CSS Всплывающие CSS Галерея CSS изображение Непрозрачность CSS спрайтов CSS Attr селекторы CSS Формы CSS Счетчики

CSS3

CSS3 Введение CSS3 Закругленные углы CSS3 Пограничные изображения CSS3 Фон CSS3 Цвета CSS3 Градиенты CSS3 Тени CSS3 Текст CSS3 шрифты CSS3 2D Трансформации CSS3 3D Трансформации CSS3 Переходы CSS3 Анимации CSS3 Изображений CSS3 Кнопки CSS3 пагинация CSS3 Несколько столбцов CSS3 Пользовательский интерфейс CSS3 Box Определение размеров CSS3 Flexbox CSS3 Медиа-запросы CSS3 Примеры MQ

CSS Адаптивный веб-дизайн

Адаптивный веб-дизайн вступление Адаптивный веб-дизайн Viewport Адаптивный веб-дизайн Вид сетки Адаптивный веб-дизайн Медиа-запросы Адаптивный веб-дизайн Изображений Адаптивный веб-дизайн Видео Адаптивный веб-дизайн Каркасы

CSS Examples

CSS Примеры CSS викторина CSS сертификат

CSS References

CSS Справка CSS Селекторы CSS функции CSS Ссылка Aural CSS Web Safe шрифты CSS Animatable CSS Единицы CSS PX-EM конвертер CSS Цвета CSS Значения цвета CSS Цвет Названия CSS3 Поддержка браузеров

 

CSS Фон


В CSS свойства фона используются для определения фоновых эффектов для элементов.

CSS свойства фона:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Фоновый цвет

background-color свойство задает цвет фона элемента.

Цвет фона страницы устанавливается следующим образом:

пример

body {
    background-color: lightblue;
}
Попробуй сам "

С помощью CSS, цвет чаще всего определяется:

  • действительное имя цвета - как "red"
  • значение HEX - как "#ff0000"
  • Значение RGB - как "rgb(255,0,0)"

Посмотрите на CSS Цвет Значения для полного списка возможных значений цвета.

В приведенном ниже примере <h1>, <p> и <div> элементы имеют разные цвета фона:

пример

h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: yellow;
}
Попробуй сам "

Изображение на заднем плане

background-image свойство определяет изображение для использования в качестве фона элемента.

По умолчанию изображение повторяется так оно охватывает весь элемент.

Фоновое изображение для страницы может быть установлен следующим образом:

пример

body {
    background-image: url("paper.gif");
}
Попробуй сам "

Ниже приведен пример плохой сочетания текста и фонового изображения. Текст почти не читаем:

пример

body {
    background-image: url("bgdesert.jpg");
}
Попробуй сам "
ЗаметкаПримечание: При использовании фонового изображения, использовать изображение , которое не нарушает текст.

Фоновое изображение - Повтор по горизонтали или вертикали

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

Некоторые изображения должны повторяться только по горизонтали или по вертикали, или они будут выглядеть странно, как это:

пример

body {
    background-image: url("gradient_bg.png");
}
Попробуй сам "

Если изображение выше, повторяется только по горизонтали ( background-repeat: repeat-x; ), фон будет выглядеть лучше:

пример

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}
Попробуй сам "
ЗаметкаПримечание: Для того, чтобы повторить изображение по вертикали установить background-repeat: repeat-y;

Фоновое изображение - Установить позицию и не повторять

Показаны фоновое изображение только один раз также задается в 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;
}
Попробуй сам "

Фоновое изображение - Фиксированная позиция

Чтобы указать , что фоновое изображение должно быть фиксированным (не будет прокручиваться с остальной части страницы), используйте background-attachment свойство:

пример

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}
Попробуй сам "

Фон - сокращённое свойство

Для сокращения кода, можно также указать все свойства фона в одном собственности. Это называется сокращенным свойством.

Сокращённое свойство для фона background :

пример

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}
Попробуй сам "

При использовании сокращённое свойство порядок значений свойств является:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Это не имеет значения, если одно из значений свойств отсутствует, до тех пор, как остальные находятся в таком порядке.


Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »


Все свойства CSS фона

Имущество Описание
background Устанавливает все свойства фона в одной декларации
background-attachment Устанавливает ли фиксирована или прокручивается фоновое изображение с остальной частью страницы
background-color Устанавливает цвет фона элемента
background-image Устанавливает фоновое изображение для элемента
background-position Устанавливает начальное положение фонового изображения
background-repeat Устанавливает, как будет повторяться фоновое изображение