CSS opacity() — фільтр прозорості
Опис
автор: Bond
Загальний опис
автор: NagarD
- Порада
-
Зверніть увагу, що
автор: Bondopacity()впливає на всі дочірні елементи, тому будьте уважні, коли застосовуєте його. - Нотатка
-
Застосування значень менше
автор: Bond1дає змогу створювати напівпрозорі ефекти та анімацію.
Синтаксис
opacity(<value>)Функція opacity може отримувати єдине значення:
-
<value> -
Числове значення в межах від
автор: Bond0до1, що вказує ступінь прозорості елемента. Значення0встановлює повну прозорість, а значення1- повну непрозорість.
| Значення без задання: | 1 |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 18 | 35 | 6 | 15 | 12 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 53 | 35 | 6 |
Приклади
+ запропонувати свій приклад у пісочниці
Наведіть курсор на квадрат, щоб побачити ефект функції opacity().
HTML
<div id="description">
<h2>Приклад 1: зміна прозорості</h2>
<p>Наведіть курсор на квадрат, щоб побачити ефект функції opacity().</p>
</div>
<div id="result">
<div class="square"></div>
</div>CSS
#description {
background-color: #f2f2f2;
padding: 20px;
font-family: Arial, sans-serif;
margin-bottom: 20px;
}
.square {
width: 200px;
height: 200px;
background-color: #ff0000;
transition: filter 0.5s ease;
}
.square:hover {
filter: opacity(.2);
}Три картки з однаковим текстом. Перша непрозора, друга приглушена властивістю opacity, третя — фільтром opacity() у ланцюжку з grayscale(). Четверта показує головну відмінність: прозорий лише фон, текст лишився чітким.
HTML
<div id="description">
<h2>opacity(): фільтр, властивість і альфа в кольорі</h2>
<p>Смуги під картками потрібні, щоб було видно, що саме просвічує.</p>
</div>
<div id="result">
<figure>
<div class="card plain">Текст картки</div>
<figcaption>без прозорості</figcaption>
</figure>
<figure>
<div class="card prop">Текст картки</div>
<figcaption>opacity: .4</figcaption>
</figure>
<figure>
<div class="card filt">Текст картки</div>
<figcaption>filter: grayscale(1) opacity(.4)</figcaption>
</figure>
<figure>
<div class="card alpha">Текст картки</div>
<figcaption>background-color: rgb(28 47 120 / .4)</figcaption>
</figure>
</div>CSS
#result {
display: flex;
gap: 16px;
flex-wrap: wrap;
padding: 16px;
background: repeating-linear-gradient(45deg, #f1f3f5 0 12px, #ced4da 12px 24px);
}
figure {
margin: 0;
width: 150px;
text-align: center;
font: 12px/1.4 sans-serif;
}
figcaption {
margin-top: 8px;
}
.card {
height: 90px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color: #fff;
font: 16px/1 sans-serif;
background-color: rgb(28 47 120);
}
.prop {
opacity: 0.4;
}
.filt {
filter: grayscale(1) opacity(0.4);
}
.alpha {
background-color: rgb(28 47 120 / 0.4);
}HTML
<div id="description">
<h2>Приклад 2</h2>
<p>Перше зображенная - оригінальне, друге - з функцією opacity().</p>
</div>
<div id="result">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Зображення 1" class="image">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Зображення 2" class="image withopacity">
</div>CSS
#description {
background-color: #f2f2f2;
padding: 20px;
font-family: Arial, sans-serif;
margin-bottom: 20px;
}
.square {
width: 200px;
height: 200px;
display: inline-block;
}
.image.withopacity {
filter: opacity(0.5);
}Коментарі
Коментарів ще немає — будьте першим!