CSS opacity — прозорість елемента
CSS властивість opacity задає рівень прозорості для елемента, таким чином, щоб він став напівпрозорим, або навіть невидимим. Без задання будь-який елемент має 100% непрозорість.
При частковій чи повній прозорості, алемент буде розміщено на новому шарі і крізь елемент буде проступати його фоновий малюнок, чи його батьківський елемент, також інші елементи з меншим значенням властивісті z-index (Тобто будуть проступати ті, елементи, що знаходяться під напівпрозорим елементом).
Непрозорість застосовується до елемента в цілому, включаючи його вміст, навіть якщо значення не успадковується дочірними елементами. Саме тому, елемент та його нащадки мають однакову непрозорість відносно фону, навіть якщо вони мають різну непрозорість відносно один одного. Якщо ти не хочеш застосовувати opacity для нащадків, використовуй властивість background-color.
background-color: rgba(0, 0, 0, 0.45);
Загальний опис
автор: NagarD
- Нотатка
-
Непрозорість може бути використана як альтернатива властивості
автор: Svitlanavisibility: hidden;Такий запис має той же ефект, що йopacity: 0;
Синтаксис
opacity: <number>|initial|inherit|unset;Властивість opacity може отримувати 4 значень:
-
number -
Визначає прозорість. В діапазоні від 0.0 (повна прозорість) до 1.0 (непрозорість).Також дозволяється писати числа без нуля попереду, наприклад:
opacity: .5;Будь-яке значення поза межами цього діапазону, хоча і є дійсним, але зводиться до найближчого значення дозволеного діапазону.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента
автор: Svitlana -
unset -
Комбінація ключових слів initial і inherit. Встановлює значення властивості як inherit, якщо властивість успадковується від свого батька, в іншому випадку значення встановлюється як initial.
автор: Svitlana
| Значення без задання: | 1 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.opacity="0.5" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 2 | 9 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Однакові блоки; у верхнього opacity: 0.5 — просвічує все: і тло, і текст.
HTML
<div class="half">opacity: 0.5 — напівпрозорий</div>
<div>Непрозорий для порівняння</div>CSS
div {
background: #0172ad;
color: #fff;
padding: 10px;
margin-bottom: 6px;
}
.half {
opacity: 0.5;
}Ліворуч opacity: 0.5 блідне разом із текстом, праворуч прозорість задано в самому кольорі тла — текст лишається чітким.
HTML
<div class="stripes">
<div class="box op">opacity: 0.5<br>текст теж збляк</div>
<div class="box rgba">rgb(1 114 173 / 50%)<br>текст чіткий</div>
</div>CSS
body {
font-family: sans-serif;
font-size: 15px;
line-height: 1.5;
padding: 20px;
}
.stripes {
display: flex;
gap: 20px;
padding: 20px;
background-image: repeating-linear-gradient(45deg, #e8ebee 0 10px, #fff 10px 20px);
}
.box {
width: 170px;
padding: 16px;
color: #fff;
}
.op {
background-color: #0172ad;
opacity: 0.5;
}
.rgba {
background-color: rgb(1 114 173 / 50%);
}HTML
<p>Ми можемо встановлювати прозорість для елементів (наприклад, фото), використовуючи різні значення від 0 до 1:</p>
<div class="demo">
<div class="box">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='165' height='150' 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="example" class="one">
<span>1.0</span>
</div>
<div class="box">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='165' height='150' 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="example" class="two">
<span>0.5</span>
</div>
<div class="box">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='165' height='150' 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="example" class="three">
<span>0.25</span>
</div>
</div>CSS
body {
font-family: sans-serif;
line-height: 1.45;
font-size: 17px;
padding: 16px 16px 0 16px;
}
.demo {
display: flex;
grid-template-columns: 1fr 1fr 1fr;
justify-content: space-between;
}
.one {
opacity: 1.0;
}
.two {
opacity: 0.5;
}
.three {
opacity: 0.25;
}
.box span {
display: block;
text-align: center;
font-style: italic;
font-family: monospace;
font-size: .9em;
}HTML
<div class="info">
<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>opacity</strong>.</p>
</div>
<main>
Перетягуй повзунок, щоб вибрати ступінь прозорості: <br><input type="range" class="input" id="input" value="50"> <span id="val">0.5</span>
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='350' height='250' 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="example" id="ex">
</main>CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
font-size: 18px;
line-height: 1.45;
}
.input {
position: relative;
top: 2px;
}
.info {
background-color: #ccc;
padding: 16px;
margin-bottom: 36px;
}
main {
padding: 16px;
}
#ex {
display: block;
margin: 36px auto 0 auto;
opacity: 0.5;
}JS
document.querySelectorAll('#input').forEach((el) => el.addEventListener('change', function () {
var newVal = document.querySelector('#input').value / 100;
document.querySelectorAll('#ex').forEach((n) => n.style.setProperty('opacity', newVal));
document.querySelectorAll('#val').forEach((n) => n.innerHTML = newVal);
}));Коментарі
Коментарів ще немає — будьте першим!