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

Несколько фонов в CSS Сайтостроение

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

От автора: CSS background является одним из наиболее часто применяемых свойств CSS. Тем не менее, использование нескольких фонов до сих пор не известно многим разработчикам. Я расскажу о возможностях применения нескольких фонов и максимально эффективном использовании 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. Вы готовы? Давайте начнем! Рассмотрим следующий пример.

CSS

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

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

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

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

CSS

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

READ
Почему не стоит часто редактировать редиректы на сайте
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

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

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

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

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

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

CSS

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

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

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

CSS

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

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

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

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

READ
Core Web Vitals никогда не станут основными факторами ранжирования Google

CSS

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

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

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

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

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

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

CSS

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

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

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

CSS

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

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;}
READ
Tarantool от Mail.Ru готовится к захвату рынка корпоративных СУБД

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

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

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

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

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

Дисплей

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

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

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

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

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

Корпус

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

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

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

CSS

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

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

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

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

Автор: Ahmad Shadeed

Редакция: Команда webformyself.

Источник

Оценить статью
Блог о самом интересном.
Добавить комментарий