Обычно, когда говорят о заполнении CSS, имеют в виду заполнение фонового цвета или изображения. Вот несколько способов заполнения в CSS:
- Цвет фона:
body {
background-color: #f2f2f2; /* цвет фона */
}
- Заполнение изображением:
body {
background-image: url("имя_файла.jpg"); /* путь к картинке */
background-repeat: no-repeat; /* повторение картинки */
background-size: cover; /* размер картинки */
}
- Градиентный фон:
body {
background: linear-gradient(to bottom, #f2f2f2, #bbb); /* Задаем градиентный фон */
}
Здесь linear-gradient() описывает тип градиента, to bottom — направление градиента, #f2f2f2 и #bbb — цвета градиента.
- Заливка фона путем повторения наложения прозрачных (или полупрозрачных) пятен на более глубокий цвет:
body {
background: repeating-radial-gradient(
10px 10px, /* x и y координаты */
circle, /* Форма повторяющегося градиента */
rgba(255, 255, 255, 0.1), /* Цвет и прозрачность первого круга */
rgba(255, 255, 255, 0.1) 20px, /* Цвет и прозрачность второго круга */
rgba(255, 255, 255, 0.2) 20px, /* Цвет и прозрачность третьего круга */
rgba(255, 255, 255, 0.2) 40px /* Цвет и прозрачность четвертого круга */
);
}
Это круги разной прозрачности, которые наложены на заданный цвет и создают эффект заполнения фона.
Это некоторые из способов заполнения CSS, их можно сочетать для достижения желаемого результата.
