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

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

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

Узнать подробнее

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

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

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

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

Элемент позиционируется относительно слоя позиционирования, установленного свойством 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

Размер фона

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дисплей

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

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

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

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

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

Корпус

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

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

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

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

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

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

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

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

Автор: Ahmad Shadeed

Источник: https://ishadeed.com

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

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

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

Узнать подробнее

CSS3. Основы

Прямо сейчас изучите CSS3 с нуля!

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.