Эксперт в области разработки веб-приложений и безопасности в интернете. Каждый месяц мой блог посещают около 90 тысяч человек. Работаю техническим директором в «Системах документооборота», занимаюсь электронным правительством.
Сегодня, благодаря этому новому знанию, я понял как решить две труднорешаемые задачи. Издавна, чтобы сделать фон блока полупрозрачным, мы вынуждены были использовать или 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 хороший браузер.
medved-gryzzly.livejournal.com (medved-gryzzly.livejournal.com)
13 декабря 2009, 02:06
bolk (bolknote.ru)
13 декабря 2009, 13:15,
ответ предназначен medved-gryzzly.livejournal.com:
medved-gryzzly.livejournal.com (medved-gryzzly.livejournal.com)
16 декабря 2009, 02:23,
ответ предназначен bolk (bolknote.ru):
bolk (bolknote.ru)
16 декабря 2009, 11:54,
ответ предназначен medved-gryzzly.livejournal.com:
medved-gryzzly.livejournal.com (medved-gryzzly.livejournal.com)
19 декабря 2009, 17:25
bolk (bolknote.ru)
19 декабря 2009, 20:03,
ответ предназначен medved-gryzzly.livejournal.com:
Alisey (alisey.myopenid.com)
Как же я благодарен.8 ноября 2009, 11:35