Вы можете подумать, что дизайн фона прост, но в CSS есть много непонятных и мощных свойств, которые вам нужно изучить.

Фоновая тема вашего сайта может существенно повлиять на его внешний вид. Цвета, изображения и фоновые узоры вызывают эмоции и создают отличный пользовательский опыт.

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

1. фоновый цвет

свойство background-color устанавливает цвет фона элемента. Вы можете установить цвет, используя имя, например «красный», значение HEX, например «# 00FF00», или значение RGB, например «rgb (0, 255, 0)». Вы также можете использовать значение HSL, чтобы установить цвет фона, используя оттенок, насыщенность и яркость.

В следующем примере цвет фона всей страницы задается оранжевым. Каждый элемент заголовка получает свой фон.

<тело>
<h2>я зеленыйh2>
<h3>я красныйh3>
<h4>я синийh4>
тело>

Используя CSS, вы можете применить уникальный цвет фона к каждому элементу:

instagram viewer 
тело {
фоновый цвет: апельсин;
}
h2 {
фоновый цвет: #006600;
}


h3 {
фоновый цвет: RGB(128, 0, 0);
}
h4{
фоновый цвет: hsl(240, 100%, 50%);
}

Это придаст странице следующий вид:

Вы можете использовать свойство opacity для определения прозрачности элемента. Непрозрачность принимает значения от 0,0 до 1,0. Чем ниже значение, тем более прозрачным является элемент.

В качестве примера попробуйте установить непрозрачность элемента body на 0,5:

тело {
фоновый цвет:апельсин;
непрозрачность:0.5;
}

Это будет отображаться следующим образом — сравните цвета с цветами на предыдущем снимке экрана:

2. изображение на заднем плане

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

<тело>
 <h1>Приветтам!h1>
 <п>яиметьанизображениевмойфон!п>
тело>

CSS-файл:

тело {
изображение на заднем плане:ссылка("https://изображений.pexels.com/фото/1191710/pxels-photo-1191710.jpeg?авто=компресс&cs=тинисргб&ж=1260&час=750&дпр=1");
}

Это будет отображаться так:

Вы также можете использовать фоновые градиенты для создания уникального внешнего вида вашего приложения.

3. фоновый повтор

Свойство background-image повторяет изображения по умолчанию. Вы можете повторить изображение по горизонтали по оси x или по вертикали по оси y.

В качестве альтернативы, если повтор не подходит вашему стилю, вы можете удалить его, используя значение неповторяющийся.

<тело>
<h1>Привет!h1>
<h3>Я демонстрирую повторяющееся свойство background-repeat по оси x!h3>
тело>

Используйте следующий CSS, чтобы применить повторяющийся фон вдоль оси x:

тело {
изображение на заднем плане: URL("https://изображений.pexels.com/фото/459335/pxels-photo-459335.jpeg?авто=компресс&cs=тинисргб&ж=1260&час=750&дпр=1");
фоновый повтор: повтор-х;
}

Результат:

Затем попробуйте повторить изображение по оси Y:

тело {
изображение на заднем плане:ссылка("https://cdn.pixabay.com/Фото/2016/04/18/22/05/ракушки-1337565__340.jpg");
фоновый повтор:повторить-у;
}

Результат:

Пример по оси Y определенно выглядит искаженным. Если это не те шаблоны, которые вы ищете, вы можете указать неповторяющийся вместо:

тело {
изображение на заднем плане:ссылка("https://изображений.pexels.com/фото/259915/pxels-photo-259915.jpeg?авто=компресс&cs=тинисргб&ж=600");
фоновый повтор:без повтора;
}

Результат:

4. фоновое положение

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

Добавьте свойство background-position к последнему изображению:

тело {
изображение на заднем плане: URL("https://изображений.pexels.com/фото/259915/pxels-photo-259915.jpeg?авто=компресс&cs=тинисргб&ж=600");
фоновое положение: вершинацентр;
}

Это будет выглядеть так:

Вы можете видеть, что изображение искажает внешний вид сайта. Давайте исправим это с помощью следующего свойства.

5. размер фона

Вы можете использовать свойство фонового изображения, чтобы определить определенный размер изображения. Он использует такие ключевые слова, как крышка и содержать или значение в пикселях или процентах. Давайте исправим искаженное фоновое изображение, добавив свойство background-size.

тело {
 фоновое изображение: URL(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto=compress&cs=tinysrgb&w=600");
 фоновый повтор: без повтора;
 фоновая позиция: центр;

Результат показывает, что изображение теперь пропорционально покрывает веб-страницу.

6. фоновое вложение

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

Покажем это в следующем коде:

<тело>
<h1>Свойство background-attachmenth1>
<п>С фиксированным свойством вложения вы заметите, что фон не перемещается вместе с текстом.п>
<п>С фиксированным свойством вложения вы заметите, что фон не перемещается вместе с текстом.п>
<п>С фиксированным свойством вложения вы заметите, что фон не перемещается вместе с текстом.п>
<п>С фиксированным свойством вложения вы заметите, что фон не перемещается вместе с текстом.п>
<п>С фиксированным свойством вложения вы заметите, что фон не перемещается вместе с текстом.п>
<п>С фиксированным свойством вложения вы заметите, что фон не перемещается вместе с текстом.п>
<п>С фиксированным свойством вложения вы заметите, что фон не перемещается вместе с текстом.п>
<п>С фиксированным свойством вложения вы заметите, что фон не перемещается вместе с текстом.п>
<п>С фиксированным свойством вложения вы заметите, что фон не перемещается вместе с текстом.п>
<п>С фиксированным свойством вложения вы заметите, что фон не перемещается вместе с текстом.п>
<п>С фиксированным свойством вложения вы заметите, что фон не перемещается вместе с текстом.п>
<п>С фиксированным свойством вложения вы заметите, что фон не перемещается вместе с текстом.п>
тело>

CSS-файл:

тело {
изображение на заднем плане: URL("https://изображений.pexels.com/фото/96627/pxels-photo-96627.jpeg?авто=компресс&cs=тинисргб&ж=600");
фоновый повтор: неповторяющийся;
фоновое положение: центр;
размер фона: крышка;
фоновое вложение: зафиксированный;
}

Если вы переместитесь вниз по странице, вы заметите, что фон не перемещается:

Чтобы продемонстрировать свойство background-attachment прокрутки, измените ключевое слово на прокрутить. Вы заметите, что теперь фон перемещается вместе с текстом.

тело {
изображение на заднем плане: URL("https://изображений.pexels.com/фото/96627/pxels-photo-96627.jpeg?авто=компресс&cs=тинисргб&ж=600");
фоновый повтор: неповторяющийся;
фоновое положение: центр;
размер фона: крышка;
фоновое вложение: прокрутить;
}

7. Фон Сокращенное свойство

Вы можете заметить, что вам нужно включить несколько свойств, чтобы получить идеальный фон. Это требует написания большого количества кода. Но вы можете сократить код, используя сокращенное свойство фона.

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

Например, вместо того, чтобы писать такой код:

тело {
фоновый цвет: зеленый;
изображение на заднем плане: URL("ноутбук3.jpg");
фоновый повтор: неповторяющийся;
размер фона: крышка;
фоновое вложение: прокрутить;
фоновое положение: центр;
}

Вы можете написать это в одну строку, например:

тело {
фон: зеленыйURL("ноутбук3.jpg") неповторяющийсякрышкапрокрутитьцентр;
}

Сокращенное свойство следует определенному порядку. Вы должны выровнять свойства в этом порядке, даже если одно или несколько отсутствуют. Порядок:

  • фоновый цвет
  • изображение на заднем плане
  • фоновый повтор
  • фоновое вложение
  • фоновое положение

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

Другие свойства фона в CSS

CSS — это мощное средство, и вы можете многое сделать с его помощью, чтобы оживить свое приложение. Вы можете использовать такие свойства, как background-clip, background-origin и background-blend-mode, чтобы добавить анимацию.

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