8.6 KiB
title | localeTitle |
---|---|
Background | Задний план |
Задний план
Свойство background позволяет использовать изображения и цвета для создания фонов для ваших веб-страниц.
Фоновый цвет
Свойство background color позволяет вам выбрать цвет вашего элемента. Это может быть фон для всей страницы или фона одного раздела вашей страницы.
- Элемент представляет собой часть HTML, такую как заголовок или абзац на веб-странице.
Вот пример установки цвета фона для веб-страницы на зеленый.
body {
background-color: green;
}
Ниже приведен пример установки цветов для двух элементов. Это установит фон заголовка фиолетовый, а остальная часть страницы - синяя.
body {
background-color: blue;
}
h1 {
background–color: purple;
}
Цвет CSS можно определить тремя способами:
- Допустимое имя цвета, такое как
blue
- Значение HEX, такое как
#FFFFF
(это шестнадцатеричное значение для белого). - Значение RGB, такое как
rgb(76,175,80)
(Это значение RGB для светло-зеленого.)
Фоновые изображения
Вы можете использовать свойство background image для установки изображения в качестве фона для элемента. Изображение повторяется по умолчанию, так что оно охватывает весь элемент.
body {
background-image: url("barn.jpg");
}
Вы также можете связать фотографии или gif, которые вы найдете в Интернете, используя их ссылку (т. Е. Из изображений Google для поиска).
body {
background-image: url("https://mdn.mozillademos.org/files/11983/starsolid.gif");
}
Фоновый рисунок - свойство повтора
Фоновое изображение повторяется как по вертикали (вверх и вниз), так и по горизонтали (по веб-странице) по умолчанию. Вы можете использовать свойство background-repeat для повторения изображения по вертикали или по горизонтали.
Вот пример, который повторяет изображение по вертикали.
body {
background-image: url("barn.jpg");
background-repeat: repeat-y;
}
Вы можете повторить изображение по горизонтали, установив для свойства background-repeat значение «repeat-x».
body {
background-image: url("barn.jpg");
background-repeat: repeat-x;
}
Вы также можете использовать свойство background-repeat, чтобы установить, что изображение не повторяется.
body {
background-image: url("barn.jpg");
background-repeat: no-repeat;
}
Фоновое изображение - свойство позиции
Вы можете использовать свойство position, чтобы указать, где ваше изображение будет расположено на веб-странице.
body {
background-image: url("barn.jpg");
background-repeat: no-repeat;
background-position: right top;
}
Фоновое изображение - фиксированное положение
Вы можете использовать свойство background-attachment для установки изображения в фиксированную позицию. Фиксированное положение делает его таким, чтобы изображение не прокручивалось вместе с остальной частью страницы.
body {
background-image: url("barn.jpg");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Фоновые градиенты
Градиент - это переход между двумя или более цветами и может использоваться с помощью CSS, аналогичного фоновому изображению.
Синтаксис фона градиента может быть довольно сложным и часто по-прежнему используется с префиксами поставщиков из-за несоответствий между поддерживаемыми браузерами.
Редактор Colorzilla Gradient Editor - отличный инструмент для создания пользовательских градиентов и связанной с ним разметки css.
Фон - стенографическая собственность
Вы можете написать свойства фона в одной строке. Это называется сокращенной собственностью.
body {
background: url("barn.jpg") no-repeat right top;
}
Вы можете оставить свойства, которые вам не нужны при использовании сокращенного свойства, но свойства должны использоваться в определенном порядке. Заказ:
- цвет
- образ
- повторение
- прикрепление
- позиция
Несколько фоновых изображений
Вы можете указать несколько фоновых изображений в одном свойстве фона.
body {
background: url("barn.jpg"), url("stars.jpg"), linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5));
}
Первое заданное изображение (или градиент) больше всего на вершине, второе - после и так далее. Если один из элементов не является правильным из-за его URL-адреса или его синтаксиса, вся строка будет игнорироваться браузером.
Некоторые базовые свойства фона CSS
Свойства фона CSS используются для определения фоновых эффектов для элементов.
Свойства фона CSS: фоновый цвет изображение на заднем плане фон-повторить фон-вложение фон положение
Вы можете обратиться к следующей ссылке в школах W3, чтобы узнать больше о фоновых и связанных с ними материалах в CSS. Фоновая ссылка на W3