Прозрачность (opacity): Тренажер CSS

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

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

Список тем

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

Сделайте синий квадрат полупрозрачным. Ваша задача — применить к элементу с классом `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`).

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

Результат

Сообщения

Выполнить

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

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

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

Сделайте красный квадрат полностью прозрачным (невидимым), используя свойство `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`.

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

Результат

Сообщения

Выполнить

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

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

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

Уменьшите непрозрачность изображения до 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`).

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

Результат

Сообщения

Выполнить

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

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

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

Сделайте так, чтобы зеленый круг становился полностью непрозрачным при наведении на него курсора мыши. Изначально он должен быть полупрозрачным (значение 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` при наведении.

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

Результат

Сообщения

Выполнить

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

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

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

Сделайте текст внутри блока `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`.

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

Результат

Сообщения

Выполнить

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

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

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

Примените прозрачность 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`.

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

Результат

Сообщения

Выполнить

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

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

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

Установите разную прозрачность для элементов списка: первому элементу - 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;`.

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

Результат

Сообщения

Выполнить

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

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