Полезные rgba в IE

Вадим Макишвили описал несколько примеров применения rgba в Internet Explorer. Примеры очень и очень полезны, и я скопирую их (без картинок, за ними идите в исходный пост) к себе:

Сегодня, благодаря этому новому знанию, я понял как решить две труднорешаемые задачи. Издавна, чтобы сделать фон блока полупрозрачным, мы вынуждены были использовать или 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 хороший браузер.
7 ноября 2009 23:44

Alisey (alisey.myopenid.com)
8 ноября 2009, 10:35

Как же я благодарен.

medved-gryzzly.livejournal.com (medved-gryzzly.livejournal.com)
13 декабря 2009, 01:06

привет.
при использовании этого кода возникает такая проблема:
в ие7-8 отрубается ClearType:
(http://blogs.msdn.com/ie/archive/2006/03/03/543181.aspx)

то есть если у блока и бэк-граунд альфа (а-ля rgba) и внутри находится текст, то текст рендерится с алиазингом :(

не смог найти воркэраундов.

bolk (bolknote.ru)
13 декабря 2009, 12:15, ответ предназначен medved-gryzzly.livejournal.com:

У Макишвилли по исходной ссылке я не вижу проблем с текстом, примеры, которые он привёл, у вас нормально работают?

medved-gryzzly.livejournal.com (medved-gryzzly.livejournal.com)
16 декабря 2009, 01:23, ответ предназначен bolk (bolknote.ru):

насколько я понимаю, проблема возникает с текстом внутри блока, к котому применяется фильтр, у Макишвилли в примерах фильтры применяются к блокам, которые скорее всего выполняют функцию "оверлэя", и не содержат в себе текста (хотя я, конечно, могу ошибаться).

проверю еще на нескольких компьютерах, но в ие8/ие7 дома на windows 7 наблюдаю такую проблему (отключение ClearType).

bolk (bolknote.ru)
16 декабря 2009, 10:54, ответ предназначен medved-gryzzly.livejournal.com:

Да, возможно так и есть. А какую задачу хочется решить? Нельзя ли там сверху наложить блок?

medved-gryzzly.livejournal.com (medved-gryzzly.livejournal.com)
19 декабря 2009, 16:25

:) в моем случае можно было просто отказаться от прозрачности для этого конкретного блока.

но вообще, я просто хотел заметить, что такая проблема существует, вдруг кто-то столкнется -- ему будет проще найти причину.

bolk (bolknote.ru)
19 декабря 2009, 19:03, ответ предназначен medved-gryzzly.livejournal.com:

Проблема с Clear Type и фильтрами (обычно — opacity, с градиентом, видимо, так же проблема) — распространённая и известная. Но лишний раз о ней напомнить не мешает.

Ваше имя или адрес блога (можно OpenID):

Текст вашего комментария, не HTML:

Кому бы вы хотели ответить (или кликните на его аватару)