Нашел интересный способ сделать у блока полупрозрачный бэкграунд.
Обычно это делается либо заданием блоку 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 и черным фоном