html - делаем таблицу полупрозрачной - Logical-Portal.Com

Добро пожаловать на форум, Гость, это ваша панель

Новые сообщения Участники Поиск Правила форума RSS

Страница 1 из 1
1

html - делаем таблицу полупрозрачной (html - делаем таблицу полупрозрачной)

html - делаем таблицу полупрозрачной

Ник: Scofield | Дата: 29.01.2012, 17:55 | Сообщение #1

Интерны

Prison Break

Сообщения:

4354

13665

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

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Прозрачность ячеек</title>
   <style type="text/css">
    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 */
    }
    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>

Результат данного примера показан на рис. 1. В примере используется класс с именем trans, при его добавлении к ячейкам, они становятся непрозрачными.