Установить таблицу полупрозрачной, а часть ячеек нет - «Таблицы» » Самоучитель CSS
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
  • 02 май 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
Популярные статьи
  • 21 декабрь 2024, 00:00
Samsung утратила лидерство в сфере дорогущих огромных телевизоров, но всё равно зарабатывает на них больше всех - «Новости сети»
Наш опрос
Помогли мы вам



Наши новости
       
  • 24 март 2016, 17:40
Написание эффективного кода
  • 24 март 2016, 16:20
Базовый синтаксис CSS
Разное и интересное
  • 02 май 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
  • 25 апрель 2024, 01:19
Скачать приложение Betera на Android
27-03-2016, 15:25
Установить таблицу полупрозрачной, а часть ячеек нет - «Таблицы»
Рейтинг:
Категория: Самоучитель CSS / Таблицы
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 и является нестандартным, стиль с ним не пройдет валидацию.


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. Непрозрачные ячейки HTML5 CSS 2.1 IE Cr Op Sa Fx Результат данного примера показан на рис. 1. В примере используется класс с именем trans, при его добавлении к ячейкам, они становятся непрозрачными. Рис. 1. Полупрозрачные и непрозрачные ячейки в таблице Из-за того, что свойство filter не входит в спецификацию CSS и является нестандартным, стиль с ним не пройдет валидацию.
Просмотров: 3 343
Комментариев: 0:   27-03-2016, 15:25
Распечатать
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:


Другие новости по теме:
ДОБАВИТЬ БАННЕР