Полупрозрачный background

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>