CSS - Множественные фоны

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

Синтаксис

Прежде чем мы окунемся в深海, начнем с азов. Синтаксис для использования множественных фонов в CSS довольно прост:

селектор {
background: фоновый1, фоновый2, ..., фоновыйN;
}

Каждый фон разделен запятой, и они分层ены от первого до последнего. Первый фон, который вы перечислите, будет сверху, а последний — снизу. Это как складывать блины — первый, который вы положите на тарелку, оказывается сверху!

CSS Множественные фоны - Использование свойства background-image

Давайте начнем с простого примера использования свойства background-image:

.multi-bg {
background-image:
url('top-image.png'),
url('bottom-image.png');
background-repeat: no-repeat, repeat;
background-position: center center, top left;
}

В этом примере мы применяем два фоновых изображения к элементу. top-image.png будет размещен сверху и не будет повторяться, а bottom-image.png будет под ним и будет повторяться. Верхнее изображение будет centered, а нижнее изображение начнется с левого верхнего угла.

CSS Множественные фоны - Использование свойства background-size

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

.sized-bg {
background-image:
url('small-icon.png'),
url('large-pattern.png');
background-size: 50px 50px, cover;
background-repeat: no-repeat, repeat;
background-position: top right, center;
}

Здесь мы устанавливаем размер small-icon.png в 50x50 пикселей, а large-pattern.png будет покрывать весь элемент. Это отличная идея для комбинирования малого логотипа или иконки с большим фоновым рисунком.

CSS Множественные фоны - Использование свойства background

Сокращенное свойство background позволяет нам устанавливать все свойства фона сразу:

.shorthand-bg {
background:
url('top-layer.png') no-repeat center / 100px,
linear-gradient(to bottom, #f00, #00f) no-repeat center / cover;
}

Этот пример combines изображение с градиентным фоном. Изображение centered и имеет размер 100 пикселей, а градиент покрывает весь элемент. Это как положить вишенку на разноцветное мороженое!

CSS Множественные фоны - Полноэкранное изображение

Иногда вы хотите, чтобы изображение покрывало весь фон:

.full-size-bg {
background:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('landscape.jpg') no-repeat center center / cover;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2em;
}

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

CSS Множественные фоны - Hero изображение

Говоря о hero разделах, вот как вы можете создать один:

.hero-bg {
background:
linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.1)),
url('hero-image.jpg') no-repeat center center / cover;
height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 20px;
color: white;
}

Этот пример creates hero раздел с фоновым изображением и градиентным покрытием, которое исчезает слева направо. Это как подготовить сцену для grand opening вашего веб-сайта!

CSS Множественные фоны - Использование свойства background-origin

Свойство background-origin определяет, где будет размещено фоновое изображение:

.origin-bg {
background-image: url('pattern.png');
background-origin: content-box, padding-box, border-box;
background-repeat: no-repeat;
border: 10px dashed black;
padding: 20px;
}

Это свойство может быть особенно полезно, когда вы хотите контролировать exactly, где начнется ваш фон в relation к box модели элемента.

CSS Множественные фоны - Использование свойства background-clip

Свойство background-clip определяет, насколько далеко фон должен extend:

.clip-bg {
background-image:
url('top-image.png'),
url('bottom-image.png');
background-clip: content-box, padding-box;
border: 10px solid rgba(0,0,0,0.5);
padding: 20px;
}

Это позволяет вам обрезать фон до different частей box модели, создавая интересный layering эффекты.

CSS Множественные фоны - Связанные свойства

Вот таблица связанных свойств, которые вы можете использовать с множественными фоновыми изображениями:

Свойство	Описание
background-image	Устанавливает одно или несколько фоновых изображений
background-position	Устанавливает начальное положение каждого фонового изображения
background-size	Указывает размер фоновых изображений
background-repeat	Устанавливает, как фоновые изображения повторяются
background-origin	Указывает зону позиционирования фоновых изображений
background-clip	Определяет, насколько далеко фон должен extend внутри элемента
background-attachment	Устанавливает, будет ли фоновое изображение прокручиваться вместе с остальной частью страницы или быть fixed

Помните, вы можете использовать эти свойства individually или combine их в сокращенном свойстве background для более краткого кода.

И вот и все,folks! Вы теперь equipped с знаниями для создания потрясающих многослойных фонов в CSS. Помните, практика makes perfect, так что не бойтесь экспериментировать с этими свойствами. Кто знает? Вы можете создать следующую big тенденцию в веб-дизайне!

Счастливого кодирования, и пусть ваши фоны всегда будут layered до совершенства!

Credits: Image by storyset