html - делаем таблицу полупрозрачной - Форум общения - Logical-portal

Время:

Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 3.147.65.85

Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.

Страница 1 из 1 1
Модератор форума: Hawk

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

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

Scofield

Сообщение оставлено 29.01.2012 в 17:55:16 | Сообщение #1

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, при его добавлении к ячейкам, они становятся непрозрачными.

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

Scofield	Сообщение оставлено 29.01.2012 в 17:55:16 \| Сообщение #1
Пользователь Сообщения: 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, при его добавлении к ячейкам, они становятся непрозрачными. Из-за того, что свойство filter не входит в спецификацию CSS и является нестандартным, стиль с ним не пройдет валидацию.
	Профиль Цитата Вверх