Режимы смешивания (mix-blend-mode, background-blend-mode): Тренажер CSS

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

Эта серия упражнений посвящена свойствам `mix-blend-mode` и `background-blend-mode`. Вы попрактикуетесь в применении различных режимов смешивания для создания интересных визуальных эффектов путем наложения цветов, изображений и градиентов. Задания построены от простого к сложному и помогут вам понять, как эти свойства влияют на взаимодействие элементов на веб-странице. Вам нужно будет заполнить пропущенные части CSS кода, чтобы достичь требуемого результата, который будет отображен в окне предпросмотра.

Список тем

Основы mix-blend-mode: Умножение цветов

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

CSS

.container {
  position: relative;
  width: 200px;
  height: 200px;
}

.square {
  width: 150px;
  height: 150px;
  position: absolute;
}

.bottom-square {
  background-color: #00bcd4; /* Голубой */
  top: 0;
  left: 0;
}

.top-square {
  background-color: #ffeb3b; /* Желтый */
  top: 50px;
  left: 50px;
  input1: input2;
}

                     .container {
  position: relative;
  width: 200px;
  height: 200px;
}

.square {
  width: 150px;
  height: 150px;
  position: absolute;
}

.bottom-square {
  background-color: #00bcd4; /* Голубой */
  top: 0;
  left: 0;
}

.top-square {
  background-color: #ffeb3b; /* Желтый */
  top: 50px;
  left: 50px;
  input1: input2;
}

HTML

<div class="container">
  <div class="square bottom-square"></div>
  <div class="square top-square"></div>
</div>

Используйте свойство `mix-blend-mode` для элемента с классом `top-square`. Значение `multiply` умножает значения базового и смешиваемого цветов.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Основы background-blend-mode: Смешивание фона и изображения

Задайте элементу фоновое изображение и фоновый цвет. Затем примените режим смешивания, чтобы изображение 'осветлило' фоновый цвет там, где оно светлее, и оставило без изменений там, где темнее.

CSS

.blended-background {
  width: 300px;
  height: 250px;
  background-color: #e91e63; /* Розовый */
  background-image: url("https://naytikurs.ru/img/1.png");
  background-size: cover;
  input1: lighten;
}

                     .blended-background {
  width: 300px;
  height: 250px;
  background-color: #e91e63; /* Розовый */
  background-image: url("https://naytikurs.ru/img/1.png");
  background-size: cover;
  input1: lighten;
}

HTML

<div class="blended-background"></div>

Используйте свойство `background-blend-mode`. Значение `lighten` выбирает более светлый из фонового цвета и цвета изображения для каждого пикселя.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

mix-blend-mode: Эффект 'разницы' для текста

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

CSS

.image-container {
  position: relative;
  width: 320px;
  height: 240px;
}

.image-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  font-weight: bold;
  color: #ffffff; /* Белый */
  text-align: center;
  input1: difference;
}

                     .image-container {
  position: relative;
  width: 320px;
  height: 240px;
}

.image-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  font-weight: bold;
  color: #ffffff; /* Белый */
  text-align: center;
  input1: difference;
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/2.png" alt="Abstract background">
  <p class="overlay-text">BLEND</p>
</div>

Примените свойство `mix-blend-mode` к элементу `<p>`. Значение `difference` вычитает темный цвет из светлого.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

background-blend-mode: Смешивание градиента и изображения

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

CSS

.gradient-image-blend {
  width: 300px;
  height: 250px;
  background-image: linear-gradient(to right, #ff9800, #9c27b0), url("https://naytikurs.ru/img/4.png");
  background-size: cover, cover;
  background-position: center, center;
  input1: input2;
}

                     .gradient-image-blend {
  width: 300px;
  height: 250px;
  background-image: linear-gradient(to right, #ff9800, #9c27b0), url("https://naytikurs.ru/img/4.png");
  background-size: cover, cover;
  background-position: center, center;
  input1: input2;
}

HTML

<div class="gradient-image-blend"></div>

У элемента должно быть два фона: `background-image` (градиент и URL изображения). Используйте свойство `background-blend-mode` со значением `color`. Порядок фонов важен: градиент должен быть объявлен *перед* изображением, чтобы он был 'сверху'.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

mix-blend-mode: Режим 'Overlay'

Два элемента наложены друг на друга: один с изображением, другой с полупрозрачным цветом. Примените к верхнему элементу (с цветом) режим смешивания 'Overlay'. Этот режим умножает или экранирует цвета в зависимости от базового цвета, сохраняя светлые и темные участки.

CSS

.container {
  position: relative;
  width: 300px;
  height: 200px;
}

.base-image {
  width: 100%;
  height: 100%;
  background: url('https://naytikurs.ru/img/5.png') center/cover;
}

.color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 150, 136, 0.7); /* Полупрозрачный бирюзовый */
  input1: overlay;
}

                     .container {
  position: relative;
  width: 300px;
  height: 200px;
}

.base-image {
  width: 100%;
  height: 100%;
  background: url('https://naytikurs.ru/img/5.png') center/cover;
}

.color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 150, 136, 0.7); /* Полупрозрачный бирюзовый */
  input1: overlay;
}

HTML

<div class="container">
  <div class="base-image"></div>
  <div class="color-overlay"></div>
</div>

Используйте свойство `mix-blend-mode` со значением `overlay` для элемента с классом `color-overlay`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

background-blend-mode: Несколько фоновых изображений

Задайте элементу два фоновых изображения. Примените режим смешивания `screen`, который инвертирует оба цвета, умножает их и инвертирует результат. Это приводит к осветлению изображения.

CSS

.multi-background {
  width: 320px;
  height: 240px;
  background-image: url("https://naytikurs.ru/img/6.png"), url("https://naytikurs.ru/img/7.png");
  background-size: cover, contain;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  input1: input2;
}

                     .multi-background {
  width: 320px;
  height: 240px;
  background-image: url("https://naytikurs.ru/img/6.png"), url("https://naytikurs.ru/img/7.png");
  background-size: cover, contain;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  input1: input2;
}

HTML

<div class="multi-background"></div>

Укажите два `background-image` через запятую. Затем используйте `background-blend-mode` со значением `screen`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

mix-blend-mode: Эффект 'Color Burn'

Расположите цветной блок поверх изображения. Примените режим смешивания, который затемняет базовый цвет, увеличивая контраст между базовым и смешиваемым цветами. Это создаст эффект 'выжигания цвета'.

CSS

.container {
  position: relative;
  width: 300px;
  height: 200px;
  background: url('https://naytikurs.ru/img/8.png') center/cover;
}

.burn-layer {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ffc107; /* Янтарный */
  opacity: 0.7;
  input1: input2;
}

                     .container {
  position: relative;
  width: 300px;
  height: 200px;
  background: url('https://naytikurs.ru/img/8.png') center/cover;
}

.burn-layer {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ffc107; /* Янтарный */
  opacity: 0.7;
  input1: input2;
}

HTML

<div class="container">
  <div class="burn-layer"></div>
</div>

Используйте `mix-blend-mode` со значением `color-burn` для верхнего цветного блока (`burn-layer`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

background-blend-mode: Режим 'Luminosity'

Задайте элементу фоновый цвет и фоновое изображение. Примените режим смешивания, который сохраняет яркость (luminosity) нижнего слоя (цвета) и использует оттенок (hue) и насыщенность (saturation) верхнего слоя (изображения).

CSS

.luminosity-blend {
  width: 300px;
  height: 250px;
  background-color: #4caf50; /* Зеленый */
  background-image: url("https://naytikurs.ru/img/9.png");
  background-size: cover;
  input1: input2;
}

                     .luminosity-blend {
  width: 300px;
  height: 250px;
  background-color: #4caf50; /* Зеленый */
  background-image: url("https://naytikurs.ru/img/9.png");
  background-size: cover;
  input1: input2;
}

HTML

<div class="luminosity-blend"></div>

Используйте `background-blend-mode` со значением `luminosity`. Убедитесь, что `background-image` указано после `background-color`, чтобы цвет был 'нижним' слоем.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку