Учебник CSS
Невозможно отучить людей изучать самые ненужные предметы.
Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3
Надо знать обо всем понемножку, но все о немногом.
Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы
Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)
Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода
Самоучитель CSS
Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5
Новости
Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости
Справочник CSS
Справочник от А до Я
HTML, CSS, JavaScript
Афоризмы
Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы
| Помогли мы вам |
- 25 апрель 2024, 01:19
Установить таблицу полупрозрачной, а часть ячеек нет - «Таблицы»
| 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 и является нестандартным, стиль с ним не пройдет валидацию.
- © Как сделать слой полупрозрачным? - «Вёрстка»
- © Сделать изображение полупрозрачным - «Изображения»
- © opacity
- © CSS и прозрачность элементов. - «Верстка»
- © Сделать, чтобы строка таблицы меняла цвет при наведении на нее курсора мыши - «Таблицы»
- © Выровнять таблицу по центру окна браузера - «Таблицы»
- © Проценты
- © Почему max-width не работает для таблицы?
- © filter
- © table-layout
|
|
|
|
АВТОРИЗАЦИЯ
|
• Мы информационный портал, на котором публикуются новости веб-дизайна и мелкие хитрости, а так же информация и советы которые вам смогут помочь по созданию сайтов, шаблонов, и многое другое. Вы также сможете найти интересные уроки по CSS3, HTML5, jQuery, Photoshop и и многое другое, интересное, с интернет мира. Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не знаешь: страшно, когда знать не хочется." «Самоучитель CSS » © Мы транслируем с 2006 года. Все для веб-дизайнера - CSS. Все материалы публикуют на сайте гости и пользователи сайта. Администрация сайта не несет ответственности за публикации. |
|