• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Основные свойства фона Background CSS (Универсальное свойство background для установки фона)
Основные свойства фона Background CSS
Kosten
Дата: Понедельник, 2019-06-03, 00:36 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25098
Награды: 57


CSS Background - это свойство CSS, которое используется для определения поведения фона и настройки HTML-элементов. Элемент html может иметь несколько свойств фона CSS, где можем определить для них значение в соответствии с нашим требованием, например, мы можем установить цвет фона элемента html или установить фоновое изображение элемента html и так далее. Ниже мы перечисляем все важные свойства фона CSS, мы будем подробно знать обо всех из них по одному.

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

Все вышеперечисленные свойства могут быть установлены для фона элемента HTML.

Давайте узнаем вкратце один за другим.

1. Цвет фона

Цвет фона является наиболее широко используемым свойством фона CSS и используется для определения цвета фона элемента HTML или группы элементов HTML.

Давайте посмотрим на это в действии.

Пример:

Код
<p style="background-color:#7b7bd0"> Абзац с цветом фона</p>


Получилось:



2. Фоновое изображение

Свойство CSS background-image используется для установки изображения в качестве фона HTML-элементов. В этом мы передаем путь к изображению для доступа к изображению в фоновом режиме.

Пример:

Код
<p style="background-image:url('Ссылка на изображение.jpg')">Абзац с фоновым изображением</p>


Выход:



3. Повторение фона

В основном CSS-свойство background-repeat всегда используется вместе с background-image, что вы используете фоновый цвет, которого меньше требуемого размера, теперь мы можем определить повторение изображения для полного заполнения необходимого пространства в фоновом режиме. В этой ситуации мы можем установить повторение изображения в двух направлениях или в одном направлении означает направление X и направление Y.

Примечание: по умолчанию background-repeat активно для обоих направлений, но мы можем установить его в соответствии с нашими требованиями.

Смотрите внимательно пример ниже, чтобы узнать, как мы можем это сделать.

Код
body {
background-image:url('Ссылка на изображение.jpg');
background-repeat:repeat-x;
}


Для повтора в направлении y.

Код
body {
background-image:url('Ссылка на изображение.jpg');
background-repeat:repeat-y;
}


Если мы не хотим повторять в любом направлении, то мы используем no-repeat.

Код
body {
background-image:url('Ссылка на изображение.jpg');
background-repeat:no-repeat;
}


4. background-position

Это свойство CSS также используется вместе с background-image для определения точного местоположения background-image, то есть, откуда мы хотим начать фоновое изображение и заканчивать. Чтобы определить значение background-position, мы можем использовать любую единицу длины, такую ​​как px, em, cs, vw. Или единицу направления, например, top, left, right, bottom.

Примечание: значение для background-position будет по часовой стрелке, начиная сверху.

Предположим, что если мы хотим, чтобы фоновое изображение начиналось с 100 пикселей сверху и с 200 слева, то посмотрим, как мы можем это реализовать.

Код
body {
background-image:url('Ссылка на изображение.jpg');
background-position:200px 100px;
}


Предположим если мы хотим сделать фоновое изображение справа и сверху:

Код
body {
background-image:url('Ссылка на изображение.jpg');
background-position:right top;
}


5. background-attachment

Если мы хотим исправить фоновое изображение, то мы используем фон-вложениекак исправлено. Будет зафиксировано фоновое изображение, а другой элемент будет прокручиваться.

Код
body {
background-image:url('Ссылка на изображение.jpg');
background-repeat:repeat-x;
background-attachment:fixed;
}


6. background

Это самая короткая форма для представления свойства фона CSS, то есть все в одном, мы можем определить все свойства фона в этом свойстве. Это наиболее предпочтительное свойство фона.

Код
body {
background:#dca0b8 url('Ссылка на изображение.jpg') no-repeat right top;
}
Прикрепления: 2807793.png(2.6 Kb) · 6974648.png(27.7 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Основные свойства фона Background CSS (Универсальное свойство background для установки фона)
  • Страница 1 из 1
  • 1
Поиск: