Прозрачность (opacity) [Модуль 4: Работа с фоном и визуальными эффектами]: Тренажер CSS

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

На этой странице собраны упражнения для отработки навыков управления прозрачностью HTML-элементов с использованием CSS свойства `opacity`. Задания помогут вам понять, как делать элементы полупрозрачными или полностью невидимыми, а также как применять эффекты прозрачности при взаимодействии с пользователем, например, при наведении курсора. Упражнения расположены по возрастанию сложности: от базового применения свойства `opacity` к одному элементу до комбинирования его с другими CSS свойствами и селекторами для создания более интересных визуальных эффектов.

Список тем

Применение базовой прозрачности

id: 37357_opacity-1

Сделайте синий квадрат полупрозрачным. Ваша задача — применить к элементу с классом `box` свойство, отвечающее за прозрачность, установив его значение на 0.5.

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  input1: input2;
}

                     .box {
  width: 100px;
  height: 100px;
  background-color: blue;
  input1: input2;
}

HTML

<div class="box"></div>

Используйте CSS свойство `opacity` для элемента с классом `.box`. Установите значение этого свойства равным `0.5` (или `.5`).

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

Результат

Сообщения

Выполнить

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

Полная прозрачность

id: 37357_opacity-2

Сделайте красный квадрат полностью прозрачным (невидимым), используя свойство `opacity`. Элемент все еще будет занимать место на странице, но виден не будет.

CSS

.invisible-box {
  width: 80px;
  height: 80px;
  background-color: red;
  /* Сделайте этот блок полностью прозрачным */
  input1: 0;
}

                     .invisible-box {
  width: 80px;
  height: 80px;
  background-color: red;
  /* Сделайте этот блок полностью прозрачным */
  input1: 0;
}

HTML

<div class="invisible-box"></div>
<p>Текст под квадратом.</p>

Примените свойство `opacity` к элементу с классом `.invisible-box` и установите его значение в `0`.

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

Результат

Сообщения

Выполнить

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

Прозрачность изображения

id: 37357_opacity-3

Уменьшите непрозрачность изображения до 70%. Найдите изображение в HTML и примените к нему соответствующий стиль.

CSS

img {
  width: 150px;
  height: auto;
  input1: input2;
}

                     img {
  width: 150px;
  height: auto;
  input1: input2;
}

HTML

<img src="https://naytikurs.ru/img/1.png" alt="Example Image">

Используйте CSS свойство `opacity` для тега `img`. Установите значение прозрачности равным `0.7` (или `.7`).

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

Результат

Сообщения

Выполнить

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

Изменение прозрачности при наведении

id: 37357_opacity-4

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

CSS

.circle {
  width: 100px;
  height: 100px;
  background-color: green;
  border-radius: 50%;
  input1: 0.6; /* Начальная прозрачность */
  transition: opacity 0.3s ease; /* Плавный переход */
}

.circle:input2 {
  input3: 1; /* Непрозрачность при наведении */
}

                     .circle {
  width: 100px;
  height: 100px;
  background-color: green;
  border-radius: 50%;
  input1: 0.6; /* Начальная прозрачность */
  transition: opacity 0.3s ease; /* Плавный переход */
}

.circle:input2 {
  input3: 1; /* Непрозрачность при наведении */
}

HTML

<div class="circle"></div>

Задайте начальную прозрачность `0.6` для элемента с классом `.circle`. Затем используйте псевдокласс `:hover` для этого же элемента, чтобы установить `opacity` в `1` при наведении.

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

Результат

Сообщения

Выполнить

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

Прозрачность текста

id: 37357_opacity-5

Сделайте текст внутри блока `div` полупрозрачным (значение 0.5), не влияя на прозрачность самого блока (его фон должен остаться непрозрачным).

CSS

.text-block {
  padding: 20px;
  background-color: #eee;
  width: 200px;
}

.text-block span {
  color: black;
  font-weight: bold;
  input1: input2;
}

                     .text-block {
  padding: 20px;
  background-color: #eee;
  width: 200px;
}

.text-block span {
  color: black;
  font-weight: bold;
  input1: input2;
}

HTML

<div class="text-block">
  <span>Этот текст должен стать полупрозрачным.</span>
</div>

Чтобы изменить прозрачность только текста, не затрагивая фон родительского блока, можно обернуть текст в другой элемент (например, `span`) и применить `opacity` к этому вложенному элементу. В данном задании текст уже обернут в `span`.

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

Результат

Сообщения

Выполнить

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

Прозрачность дочерних элементов

id: 37357_opacity-6

Примените прозрачность 0.4 к родительскому блоку с классом `parent`. Обратите внимание, как это повлияет на дочерний элемент (текст).

CSS

.parent {
  background-color: lightblue;
  padding: 15px;
  width: 250px;
  input1: input2;
}

.child {
  background-color: white;
  padding: 10px;
  border: 1px solid black;
}

                     .parent {
  background-color: lightblue;
  padding: 15px;
  width: 250px;
  input1: input2;
}

.child {
  background-color: white;
  padding: 10px;
  border: 1px solid black;
}

HTML

<div class="parent">
  <p class="child">Этот текст находится внутри дочернего блока.</p>
</div>

Задайте свойство `opacity` со значением `0.4` (или `.4`) для селектора `.parent`. Заметьте, что дочерние элементы наследуют прозрачность родителя, и их нельзя сделать менее прозрачными, чем родитель, с помощью `opacity`.

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

Результат

Сообщения

Выполнить

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

Разная прозрачность для элементов списка

id: 37357_opacity-7

Установите разную прозрачность для элементов списка: первому элементу - 1 (непрозрачный), второму - 0.7, третьему - 0.4.

CSS

ul {
  list-style: none;
  padding: 0;
}

li {
  background-color: purple;
  color: white;
  padding: 10px;
  margin-bottom: 5px;
  width: 150px;
}

li:nth-child(1) {
  input1: 1;
}

li:input2(2) {
  opacity: input3;
}

li:nth-child(3) {
  opacity: input4;
}

                     ul {
  list-style: none;
  padding: 0;
}

li {
  background-color: purple;
  color: white;
  padding: 10px;
  margin-bottom: 5px;
  width: 150px;
}

li:nth-child(1) {
  input1: 1;
}

li:input2(2) {
  opacity: input3;
}

li:nth-child(3) {
  opacity: input4;
}

HTML

<ul>
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

Используйте псевдоклассы `:nth-child()` для выбора конкретных элементов `li` по их порядковому номеру. Для `li:nth-child(1)` установите `opacity: 1;`, для `li:nth-child(2)` - `opacity: 0.7;`, для `li:nth-child(3)` - `opacity: 0.4;`.

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

Результат

Сообщения

Выполнить

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