Урок 55 із 104
53%
← Назад

Напівпрозорість через властивість opacity у CSS

Вивчаємо властивість opacity та порівнюємо її з rgba() для створення прозорих і напівпрозорих елементів.

Властивість opacity

Властивість opacity дозволяє задати прозорість елемента. Вона приймає значення від 0 до 1, де 0 — повністю прозорий елемент, а 1 — повністю непрозорий.

  • opacity: 0 — елемент повністю прозорий.
  • opacity: 0.5 — елемент має прозорість 50%.
  • opacity: 0.7 — елемент має прозорість 30%.
  • opacity: 1 — елемент повністю непрозорий.

Приклад використання opacity

div {

border: 10px solid red;
background-color: black;
color: red;
opacity: 0.7;
}

opacity та rgba() — у чому різниця?

Головна відмінність полягає в тому, на що саме поширюється прозорість. Властивість opacity впливає на весь елемент разом із його дочірніми елементами. rgba() дозволяє задати прозорість конкретному кольору.

Прозорість через opacity

.box {

background-color: black;
color: white;
border: 5px solid red;
opacity: 0.5;
}

Прозорість через rgba()

.box {

background-color: rgba(0, 0, 0, 0.5);
color: white;
border: 5px solid red;
}

Порівняння на практиці

<div class="opacity-box">

opacity

</div>

<div class="rgba-box"> rgba </div>
.opacity-box {

background-color: black;
color: white;
border: 5px solid red;
opacity: 0.5;
}

.rgba-box {
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: 5px solid red;
}

У першому блоці opacity: 0.5 робить прозорими фон, текст і межу. У другому блоці rgba() робить напівпрозорим тільки фон, тому текст і межа залишаються непрозорими.

❗ Важливо:

Якщо потрібно зробити напівпрозорим увесь елемент — використовуйте opacity. Якщо потрібно зробити прозорим лише фон, текст або межу — зручніше використовувати rgba().

Практичне завдання

📌 Завдання:
  1. №1. Створіть фонову картинку та розмістіть поверх неї два блоки з текстом, фоном і межею.
  2. №2. Для першого блоку використайте opacity: 0.5.
  3. №3. Для другого блоку зробіть напівпрозорим тільки фон за допомогою rgba().
  4. №4. Порівняйте результат і визначте, які частини кожного блоку стали прозорими.
<!-- Початковий код -->

<div class="container"> <div class="box opacity-box"> opacity </div>

<div class="box rgba-box"> rgba </div> </div>
💡 Показати підказку

Для першого блоку використайте opacity: 0.5. Для другого встановіть background-color: rgba(0, 0, 0, 0.5), але не додавайте opacity.

✅ Показати відповідь
.container {

background-image: url("bg.png");
background-repeat: no-repeat;
background-size: cover;
padding: 30px;
}

.box {
width: 300px;
padding: 30px;
margin-bottom: 20px;
border: 5px solid red;
background-color: black;
color: white;
font-size: 30px;
font-weight: bold;
}

.opacity-box {
opacity: 0.5;
}

.rgba-box {
background-color: rgba(0, 0, 0, 0.5);
}