Блог

Нашел интересный способ сделать у блока полупрозрачный бэкграунд.

Обычно это делается либо заданием блоку css свойства opacity, либо подкладыванием в качетве фона полупрозрачного png. Первый способ неудобен тем, что полупрозрачным становится так же все содержимое блока. Второй - как минимум потому, что там есть картинка.

Альтернативой, не обладающей перечисленными недостатками, является использование RGBa цветов.

.alpha {
/* для браузеров, которые не понимают что такое rgba */
  background: rgb(0, 0, 0);
/* а вот это для всех хороших браузеров */
  background: rgba(0, 0, 0, 0.6);
}

Круто, да? Одна строчка и получили полупрозрачный фон у блока. Теперь ложка дегтя. Да, горячо любимый нами IE не понимает, что такое rgba. Но у него есть фильтр gradient, который нам поможет:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);

Мы указываем начальный и конечный цвет градиента одинаковым. А прозрачность указываем в первых двух из восьми разрядов цвета. Разряды же с третьего по восьмой указывают сам цвет. 99 мы получаем, умножив 255 (максимально-возможное значение) на 0.6 (прозрачность, которая нам нужна) и переведя результат в шестнадцатеричную систему счисления.

Итак, соединим все вместе:

.alpha {
/* для браузеров, которые не понимают что такое rgba */
  background: rgb(0, 0, 0);
/* а вот это для всех хороших браузеров */
  background: rgba(0, 0, 0, 0.6);
}

И в conditional comments (ну или с помощью css-хаков) скармливаем IE следующие стили:

.alpha {
background: transparent;
/* для IE 6,7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
zoom: 1;
/* для IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

Браузеры, в которых это все работает:

- 3+
- 2+
- 10
- 6, 7, 8

тестовый блок с прозрачностью 0.6 и черным фоном