CSS - Фоны: Пособие для начинающих

Здравствуйте, будущие маги CSS! Сегодня мы окунемся в神奇 мир CSS фонов. К концу этого урока вы сможете transformsplain, скучные веб-страницы в визуально потрясающие шедевры. Так что возьмите свою виртуальную кисть и давайте начнем!

Что такое CSS Фон?

Прежде чем углубляться в детали, давайте поймем, что такое CSS фон. Представьте свою веб-страницу как чистый холст. Свойство CSS background�� как ваша кисть, позволяющая добавить цвета, изображения и узоры, чтобы оживить ваш холст.

Свойство Фона: Основы

Свойство CSS background являетсяorthand-свойством, которое позволяет вам задать все свойства, связанные с фоном, сразу. Это как швейцарский армейский нож для стилизации фона вашей веб-страницы!

Синтаксис

Вот базовый синтаксис для свойства background:

selector {
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];
}

Не волнуйтесь, если это выглядит пугающе. Мы разберем это по частям!

Possible Values

Давайте посмотрим на различные значения, которые мы можем использовать со свойством background:

Свойство	Описание	Пример
background-color	Задает цвет фона	background-color: #ff0000;
background-image	Задает одно или несколько фоновых изображений	background-image: url('image.jpg');
background-repeat	Указывает, как должно повторяться фоновое изображение	background-repeat: no-repeat;
background-attachment	Задает, будет ли фоновое изображение прокручиваться вместе с остальной частью страницы	background-attachment: fixed;
background-position	Задает начальное положение фонового изображения	background-position: center top;

Теперь давайте рассмотрим каждый из них более подробно!

Фоновый Цвет

Самый простой способ начать — это задать фоновый цвет. Вот как это делается:

body {
background-color: #f0f0f0;
}

Это устанавливает фоновый цвет всего сайта в светло-серый. Вы можете использовать имена цветов, шестнадцатеричные значения, RGB или даже HSL значения.

Фоновое Изображение

Хотите добавить немного пышности? Давайте добавим изображение!

body {
background-image: url('space.jpg');
}

Этот код устанавливает 'space.jpg' в качестве фонового изображения для всей страницы. Убедитесь, что путь к изображению правильный, иначе у вас получится пустой холст!

Фоновое Изображение с Цветом

Вы можете combine фоновые изображения с цветами. Цвет будет виден через любые прозрачные части изображения:

body {
background-color: #000000;
background-image: url('stars.png');
}

Это создает эффект звездного неба с черным фоном и полупрозрачным изображением звезд.

Фоновое Повторение

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

body {
background-image: url('logo.png');
background-repeat: no-repeat;
}

Это отображает логотип только один раз, без повторения. Вы также можете использовать repeat-x для горизонтального повторения или repeat-y для вертикального повторения.

Положение Фона

Хотите поместить свое фоновое изображение в определенное место? Используйте background-position:

body {
background-image: url('watermark.png');
background-repeat: no-repeat;
background-position: bottom right;
}

Это помещает водяной знак в правый нижний угол страницы.

Фоновое Присоединение

Вы когда-нибудь видели классные параллакс-эффекты, где фон остается на месте, пока вы прокручиваете? Это действие background-attachment:

body {
background-image: url('mountains.jpg');
background-attachment: fixed;
}

Это держит изображение гор fixed, пока контент прокручивается поверх него.

Объединение Всего

Теперь давайте объединим все, что мы узнали, в одно супермощное свойство фона:

body {
background: #f0f0f0 url('pattern.png') repeat-x fixed center top;
}

Это устанавливает светло-серый фон, добавляет горизонтально повторяющийся узорный фоновый изображение, который fixe в центре сверху страницы.

Свойства CSS Фонов - Related Properties

Чтобы завершить наше путешествие, вот несколько дополнительных свойств, связанные с фоном, которые могут вам пригодиться:

Свойство	Описание	Пример
background-size	Задает размер фонового изображения	background-size: cover;
background-origin	Задает, где находится фоновое изображение	background-origin: content-box;
background-clip	Задает область рисования фона	background-clip: padding-box;

Заключение

Поздравляю! Вы только что сделали свои первые шаги в красочном мире CSS фонов. Помните, ключ к maîtrise CSS — это практика. Так что вперед, экспериментируйте с этими свойствами, mix и match, и посмотрите, какие удивительные дизайны вы можете создать!

Кто знает? С этими навыками вы можете стать следующим Пикассо веб-дизайна. Счастливого кодирования, и пусть ваши фоны всегда будут красивыми!

Credits: Image by storyset