Несколько фонов в CSS

В этой статье я подробно рассмотрю свойство background-image и предоставлю наглядное объяснение того, как мы можем наложить несколько фонов, и какая от этого польза. Конечно, будут некоторые наглядные примеры! Если вы не знаете о свойствах CSS background, я предлагаю перейти по этой ссылке на Mozilla Developer Network (MDN).

Введение

Свойство CSS background является сокращением для следующих свойств: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size и background-attachment.

В этой статье я остановлюсь на background-image, background-position и background-size. Вы готовы? Давайте начнем! Рассмотрим следующий пример.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

CSS
.element {
background: url(cool.jpg) top left/50px 50px no-repeat;
}

Фоновое изображение с размером 50px * 50px расположено в верхнем левом углу элемента. Важно понимать и помнить порядок расположения и размер.

На рисунке выше за background-position следует background-size. Это не может работать наоборот! Другими словами, следующий CSS недопустим:

CSS
.element {
/* Warning: Invalid CSS */
background: url(cool.jpg) 50px 50px/top left no-repeat;
}

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

Элемент позиционируется относительно слоя позиционирования, установленного свойством background-origin. Мне нравится гибкость background-position. Оно имеет несколько способов позиционирования элементов:

Ключевое слово (top, right, bottom, left, center)

Процентные значения. Например: 50%

Значения длины. Например: 20px 2.5rem

Значения смещения от края. Например: top 20px left 10px

Система координат начинается с верхнего левого угла со значением по умолчанию 0% 0%. Стоит отметить, что значение top left совпадает с left top. Браузер достаточно умен, чтобы определить, какое из них для оси X, а какой для оси Y.

CSS
.element {
background: url(cool.jpg) top left/50px 50px no-repeat;
/* is the same as */
background: url(cool.jpg) left top/50px 50px no-repeat;
}

Размер фона

Название говорит само за себя. Размер состоит из ширины и высоты. Для свойства background-size первое значение — ширина, а второе — высота.

Нет необходимости использовать два значения. Вы можете использовать одно, и оно будет задавать ширину и высоты.

Отказ от ответственности: стоит упомянуть, что спецификация CSS гласит: «Если задано только одно значение, второе считается заданным автоматически». Однако это не реализовано в браузерах и изменится в будущем.

Теперь, когда я рассмотрел основы работы CSS background, давайте узнаем, как использовать несколько фонов.

Несколько фонов

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

CSS
.element {
background: url(cool.jpg) top left/50px 50px no-repeat,
url(cool.jpg) center/50px 50px no-repeat;
}

На рисунке выше у нас есть два фоновых слоя. Каждый из них расположен по-своему. Это основное использование нескольких фонов. Давайте рассмотрим более сложный пример.

Порядок наложения

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

CSS
.hero {
min-height: 350px;
background: url(‘table.jpg’) center/cover no-repeat,
url(‘konafa.svg’) center/50px no-repeat;
}

У нас есть тарелка и стол. Что бы вы ожидали от результата CSS выше? Что будет первым? Тарелка или стол? Ответ — стол. В CSS первый фон может накладываться на второй, а второй — на третий, и так далее. При замене порядка фонов результат будет таким, как ожидалось.

CSS
.hero {
background: url(‘konafa.svg’) center/50px no-repeat,
url(‘table.jpg’) center/cover no-repeat;
}

Сплошной цвет

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

CSS
.hero {
background: linear-gradient(#3c88Ec, #3c88Ec)
}

Мы можем изучить очень и очень полезный вариант использования CSS-градиентов, который заключается в рисовании в CSS. Оставайтесь с нами!

Случаи использования и примеры

Наложение Hero-раздела

Часто вам может понадобиться поместить наложение поверх Hero-раздела, чтобы текст можно было легко прочитать. Это можно легко сделать, сложив два фона.

CSS
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
url(«landscape.jpg») center/cover;
}

Еще лучше то, что мы можем использовать тот же метод, чтобы применить к элементу оттенки:

CSS
.hero {
background: linear-gradient(135deg, rgba(177, 234, 77, 0.25), rgba(69, 149, 34, 0.25),
url(«landscape.jpg») center/cover;
}

Рисование с помощью CSS

Возможности использования CSS-градиентов для рисования безграничны. Вы можете использовать linear-gradient или radial-gradient и многое другое. В этом простом примере я объясню, как нарисовать ноутбук.

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

Обратите внимание, что когда элементы ноутбука разобраны, теперь проще думать о том, как реализовать это как несколько CSS-фонов. Если вы заметили, я создал два круга, которые будут действовать как закругленные углы для корпуса, так как нет прямого способа сделать градиент с закругленными краями.

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

CSS
:root {
—case: linear-gradient(#222, #222);
—case-size: 152px 103px;

—display: linear-gradient(#fff, #fff);
—display-size: 137px 87px;

—reflection: linear-gradient(205deg, #fff, rgba(255, 255, 255, 0));
—reflection-size: 78px 78px;

—body: linear-gradient(#888, #888);
—body-size: 182px 9px;

—circle: radial-gradient(9px 9px at 5px 5.5px, #888 50%, transparent 50%);
—circle-size: 10px 10px;
}

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

Отражение на экране

Как объяснялось ранее, элемент, который должен быть сверху, должен быть определен первым. В нашем случае отражение на экране должно быть первым градиентом.

Дисплей

Дисплей центрируется по оси X и располагается в 6px от оси Y.

Пластиковый корпус

Корпус расположен под дисплеем, он центрирован по оси x и расположен в 0px по оси y.

Корпус

Это самый интересный компонент в чертеже. Во-первых, он представляет собой прямоугольник, и у нас есть два круга на каждой стороне (слева и справа).

Конечный результат

CSS
:root {
—case: linear-gradient(#222, #222);
—case-size: 152px 103px;
—case-pos: center 0;

—display: linear-gradient(#fff, #fff);
—display-size: 137px 87px;
—display-pos: center 6px;

—reflection: linear-gradient(205deg, #fff, rgba(255, 255, 255, 0));
—reflection-size: 78px 78px;
—reflection-pos: top right;

—body: linear-gradient(#888, #888);
—body-size: 182px 9px;
—body-pos: center bottom;

—circle: radial-gradient(9px 9px at 5px 5.5px, #888 50%, transparent 50%);
—circle-size: 10px 10px;
—circle-left-pos: left bottom;
—circle-right-pos: right bottom;
}

.cool {
width: 190px;
height: 112px;

background-image: var(—reflection), var(—display), var(—case), var(—circle), var(—circle), var(—body);

background-size: var(—reflection-size), var(—display-size), var(—case-size), var(—circle-size), var(—circle-size), var(—body-size);

background-position: var(—reflection-pos), var(—display-pos), var(—case-pos), var(—circle-left-pos), var(—circle-right-pos), var(—body-pos);

background-repeat: no-repeat;

/*outline: solid 1px;*/
}

Смешивание нескольких фонов

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

CSS
.hero {
background: linear-gradient(#000, #000),
url(«landscape.jpg») center/cover;
background-blend-mode: color;
}

Спасибо за прочтение.

Автор: Ahmad Shadeed