Вслед за Женей, учусь новому. http://bolknote.ru/2009/11/01/~2299

Женя удивился, а вслед за ним, удивился и я. Сколько лет назад командой разработки MSIE были придуманы разные клевые штуки, облегчающие разработку. И многие из них всё еще не предложены нам от W3C.

Сегодня, благодаря этому новому знанию, я понял как решить две труднорешаемые задачи. Издавна, чтобы сделать фон блока полупрозрачным, мы вынуждены были использовать или png-24 картинку в фоне или opacity-свойство. Но в случае с png-24, для ИЕ6 нужно писать AlphaImageLoader фильтр, который катастрофически замедляет рендеринг страницы. А в случае с opacity приходилось придумывать трюки, чтобы дети блока не бледнели от родительского opacity.

А теперь проблему opacity можно забыть, как страшный сон:

.block
{
    background: #rgba
}
* html .block
{
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,
           endColorstr=#99000000);
}

В начальной и конечной позиции один и тот же RGB (000000) и добавляю перед ним одно и то же значение Alpha (99) Значение Alpha указывается в 16-тиричной системе, где 00 - полностью прозрачный, а ff - непрозрачный пиксел

Я протестировал скорость рендеринга страницы, на которой выливается 300 элементов с gradient-фильтром — он не замедляет рендеринг и это сильно радует

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

Иногда использовать png-24 всё-таки необходимо, как например в случае, когда нужно обрезать длинную неразрывную строку, уводя ее градиентом в непрозрачность.

В этом случае можно использовать второй способ.

.block
{
    background: url(image.png)
}
* html .block
{
    filter:progid:DXImageTransform.Microsoft.gradient (startColorstr=#00ffffff,
           endColorstr=#ffffffff, GradientType=1);
}

GradientType принимает значение 1, если градиент рисуется слева-направо; и 0, если градиент сверху-вниз.

MSIE хороший браузер.