| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 5.5+ | 1.0+ | 9.0+ | 2.0+ | 3.5+ | 2.0+ | 1.0+ |
Завдання
Задати значення напівпрозорості для всієї таблиці, а окремі осередки зробити непрозорими..
Рішення
Для зміни прозорості елемента в CSS3 передбачено властивість opacity, його значення може змінюватися від 0 до 1. Нуль відповідає повній прозорості елемента, а одиниця, навпаки, непрозорості. Сучасні браузери цілком коректно працюють з цією властивістю за винятком браузера Internet Explorer, тому для нього доводиться використовувати спеціальне властивість filter зі значенням alpha(Opacity=X), де X може змінюватися від 0 до 100.
Щоб зробити таблицю напівпрозорої, досить до селектору TABLE додати opacity: 0.5. Виникає спокуса аналогічну дію виконати і з селектором TD, тільки задавши йому opacity: 1. Проте очікуваного результату не станеться, комірка залишиться напівпрозорої. Все тому, що дочірні елементи не можуть перевищити значення opacity у батьків. Тому слід діяти від зворотного, встановивши opacity: 0.5 для селектора TD. Для тих осередків, де прозорість не потрібна, треба ввести свій клас, додавши до нього opacity: 1, як показано в прикладі 1.
Приклад 1. Непрозорі осередку
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Прозорість комірок</title>
<style>
body {
background: url(images/redline.png);
}
table {
width: 100%; /* Ширина таблиці */
}
td {
background: #fc0; /* Колір фону */
border: 1px solid #333; /* Границя навколо клітинок */
padding: 5px; /* Поля в комірках */
opacity: 0.5; /* Напівпрозорість таблиці */
filter: alpha(Opacity=50); /* Для IE */
}
.trans {
opacity: 1; /* Непрозорість клітинок */
filter: alpha(Opacity=100); /* Для IE */
}
</style>
</head>
<body>
<table>
<tr>
<td>Леонардо</td>
<td>5</td>
<td>8</td>
</tr>
<tr>
<td class="trans">Рафаель</td>
<td class="trans">4</td>
<td class="trans">11</td>
</tr>
<tr>
<td>Мікеланджело</td>
<td>24</td>
<td>9</td>
</tr>
<tr>
<td>Донателло</td>
<td>2</td>
<td>13</td>
</tr>
</table>
</body>
</html>
Результат цього прикладу показано на рис. 1. У прикладі використовується клас з ім'ям trans, при його додаванні до них, вони стають непрозорими.
Рис. 1. Напівпрозорі і непрозорі клітинки таблиці
З-за того, що властивість filter не входить в специфікацію CSS і є нестандартним, стиль з ним не пройде валідацію.