CSS Opacity / Transparency
Властивість opacity визначає непрозорість / прозорість елемента.
Прозоре зображення
Властивість opacity може приймати значення від 0,0 до 1,0. Чим нижче значення, тим прозоріше:
opacity 0.2
opacity 0.5
opacity 1
(за замовчуванням)
Примітка: IE8 та більш ранні версії використовують filter:alpha(opacity=x). Значення x може приймати значення від 0 до 100. Більш низьке значення робить елемент більш прозорим.
Ефект прозорості при наведенні курсора
Властивість opacity часто використовується разом із селектором :hover для зміни непрозорості при наведенні курсора:
Приклад
img {
opacity: 0.5;
filter: alpha(opacity=50); /* Для IE8 и ранее */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* Для IE8 и ранее */
}
Спробуйте самі »
Пояснення прикладу
Перший блок CSS схожий на код в Прикладі 1. Крім того, ми додали, що має відбуватись, коли користувач наводить курсор на одне із зображень. В цьому випадку ми хочемо, щоб зображення НЕ було прозорим, коли користувач наводить на нього курсор. Значення в CSS для цього opacity:1;.
Коли вказівник миші віддаляється від зображення, зображення знову стає прозорим.
Приклад зворотнього ефекту при наведенні курсора:
Приклад
img:hover {
opacity: 0.5;
filter: alpha(opacity=50); /* Для IE8 и ранее */
}
Спробуйте самі »
Прозорий блок
При використанні властивості opacity для додавання прозорості на фон елемента всі його дочірні елементи успадковують однакову прозорість. Це може ускладнити читання тексту всередині повністю прозорого елементу:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Приклад
div {
opacity: 0.3;
filter: alpha(opacity=30); /* Для IE8 і більш ранніх */
}
Спробуйте самі »
Прозорість з використанням RGBA
Якщо ви не хочете застосовувати непрозорість до дочірніх елементів, як в прикладі вище, використовуйте кольорові значення RGBA. В наступному прикладі задається прозорість кольору фону, а не текста:
100% opacity
60% opacity
30% opacity
10% opacity
Із розділу CSS Кольори ви дізнались, що в якості значення кольору можна використовувати RGB. В додаток до RGB можна використовувати значення кольору RGB з альфа-каналом (RGBA), яке визначає непрозорість для кольору.
Значення кольору RGBA визначається за допомогою: rgba (червоний, зелений, синій, альфа). Параметр alpha - це число від 0,0 (повністю прозоре) до 1,0 (повністю непрозоре).
Порада. Докладніше про кольори RGBA ви можете дізнатись в розділі CSS Кольори на нашому сайті W3Schools українською.
Приклад
div {
background: rgba(76, 175, 80, 0.3) /* Зелений фон із 30% прозорості */
}
Спробуйте самі »
Текст в прозорому полі
Це деякий текст, який розміщується в прозорому блоці.
Приклад
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #fff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* Для IE8 і більш ранніх */
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>Це деякий текст, який розміщується в прозорому блоці.</p>
</div>
</div>
</body>
</html>
Спробуйте самі »
Спочатку ми створюємо елемент <div> (class="background") з фоновим зображенням і межею. Потім створюємо ще один <div> (class="transbox") всередині першого <div>. <div class="transbox"> мають колір фона та межу - div прозорий. Всередині прозорого <div> додаємо текст всередині елемента <p>.
