Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Как оформить полупрозрачную таблицу, сохранив нормальный фон для части ячеек

Дата:11.02.16 в 12:08
Раздел: 

Из этой статьи можно узнать, как определить таблице прозрачность, за исключением некоторых определенных ячеек.

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

Еще один очень интересный прием оформления таблицы – настройка прозрачности ее ячеек. С выходом последней спецификации CSS3 это стало возможным реализовывать с помощью свойства opacity, в котором в форме десятичной дроби указывается степень прозрачности объекта. К примеру, 0 установить абсолютный просвет объекта, а 1 сделает его полностью не прозрачным. Также стоит отметить, что допускается пренебречь нулем в начале значения. Разделителем дроби обязательно должна выступать точка.

Все последние браузеры отлично отрабатывают функции этого свойства. Единственным и ожидаемым исключением является IE. Для него прозрачность устанавливается с помощью свойства filter. Форма указания значений для фильтра следующая: alpha(Opacity=X). Вместо Х нужно подставлять числа от 0 до 100. Принцип изменения прозрачности сохраняется: чем ниже значение, тем выше прозрачность.

Итак, переходим к прозрачности. Как уже было сказано, нужно воспользоваться свойством opacity. Только применить его нужно не к тегу table, а к td. В противном случае не получится сделать некоторые ячейки не прозрачными, так как дочерний элемент не может перекрыть оформление своего родителя. Поэтому создадим уникальные селекторы класса, для которых укажем небольшую прозрачность и полностью не прозрачный фон.

CSS

.first {
	background: #7caee1; 
    opacity: 0.5; 
    filter: alpha(Opacity=50); 
  }
  .second {
	background: #7caee1; 
    opacity: 1; 
    filter: alpha(Opacity=100); 
  }

В результате чего получаем такую картину

полупрозрачность

Для справки

Важно помнить, что при использовании свойства filter код не пройдет проверку на валидацию.

В каких браузерах работает?

5.5+ 1.0+ 9.0+ 2.0+ 3.5+ 2.0+ 2.0+

Оценок: 2 (средняя 5 из 5)

Оценка: 
Ключевые слова: 
Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)