| Kosten | Понедельник, 03 Июня 2019 | Сообщение 1 |
| 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;
} | | Страна: (RU) |
| |
