Как установить таблицу полупрозрачной, а часть ячеек нет?

🕛 22.01.2009, 23:46

Для изменения прозрачности элемента в 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. Непрозрачные ячейки

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Прозрачность ячеек</title> <style type="text/css"> BODY { background: url(images/line.gif); } TABLE { width: 100%; /* Ширина таблицы */ } TD { background: #fc0; /* Цвет фона */ border: 1px solid #333; /* Граница вокруг ячеек */ padding: 5px; /* Поля в ячейках */ opacity: 0.5; /* Полупрозрачность таблицы */ filter: alpha(Opacity=50); /* Для IE */ } TD.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>

Из-за того, что атрибут filter не входит в спецификацию CSS, стиль с ним не пройдет валидацию.