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

0 425

В этой статье я подробно рассмотрю свойство 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. Вы готовы? Давайте начнем! Рассмотрим следующий пример.

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

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

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

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

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

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

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

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

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

1234 .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

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

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

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

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;
}

12345 .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 гласит: «Если задано только одно значение, второе считается заданным автоматически». Однако это не реализовано в браузерах и изменится в будущем.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мы можем изучить очень и очень полезный вариант использования 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;
}

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

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

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

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

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

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

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

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

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

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

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

Обратите внимание, что когда элементы ноутбука разобраны, теперь проще думать о том, как реализовать это как несколько 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;
}

12345678910111213141516 :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;}

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

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

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

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

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

Дисплей

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

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

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

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

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

Корпус

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

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

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

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;*/
}

12345678910111213141516171819202122232425262728293031323334353637 :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

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

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

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

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

Автор: Ahmad Shadeed

Оставьте ответ

Ваш электронный адрес не будет опубликован.