Всем привет. Не так давно я рассказывал как сделать всплывающую подсказку на CSS.
Одной из характерных особенностей того тутора было то, что бакграунд подсказки указывался в формате RGBa. Модель RGBa позволяет дополнительно указать прозрачность цвета.
Выглядит это так:
.rgba {background: rgba(0,0,0,0.3);}
С нормальными браузерами проблем никаких, а вот IE как всегда приходиться учить.
Раньше, чтобы сделать фон блока полупрозрачным, приходилось использовать или png-24 картинку в фоне или opacity-свойство.
Но в случае с png-24, для IE6 нужно писать AlphaImageLoader фильтр, который катастрофически замедляет рендеринг страницы, а в случае с opacity придумывать трюки, чтобы дети блока не бледнели от родительского opacity.
Теперь про это можно забыть и насладиться красивым кодом.
Для нормальных брузеров все остается как на примере выше, для IE вставляем костыль:
.rgba {
background: rgba(0,0,0,0.3);
*background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
*zoom: 1;
}
В начальной и конечной позиции один и тот же RGB (000000) и добавляется перед ним одно и то же значение Alpha (66)
Значение Alpha указывается в 16-тиричной системе, где 00 – полностью прозрачный, а ff – непрозрачный пиксель.
2leep.com
27 февраля 2010 в 22:51
честно говоря я до сих пор использую png с настройкой прозрачности, испытываю явный минус введи тяжелого порой веса картинки в случае округлых краев, с прямоугольниками все проще 1 пиксель на весь блок…
для IE если делать прозрачность только средствами css то без трюков не обойтись
спасибо за статью, попробую воспользоваться в будущем…
28 февраля 2010 в 5:29
Спасибо, волшебник! В прошлом действительно попарился с opacity, на будущее имею ввиду RGBa
28 февраля 2010 в 18:50
Уж где и в чем у Майкрософта проблемы… Но в браузерах все ориентруются на IE. Под него все обычно гарантированно работает. А тут такое, что пришлось-таки вправить ему костыль
28 февраля 2010 в 14:12
Не соглашусь. Под IE работает далеко не всё и не правильно. На IE не ориентируются, его терпят как неизбежное зло. И вправлять мозги ослику приходиться каждый раз, как пытаешься сделать что-нибудь чуть более интересное чем уровень 2001 года.
01 марта 2010 в 10:53
Мне opera больше нравится
01 марта 2010 в 8:13
IE вообще гавно.
01 марта 2010 в 16:27
Уже не за горами уничтожение ослика полностью. Даже MS заявил, что скоро прекратит поддержку IE6
02 марта 2010 в 19:04
IE хорошая штука надо в ней научиться правильно работать с ним!
03 марта 2010 в 11:46
Под експлорер всегда приходится извращатся! Спасибо за полезный код!
04 марта 2010 в 9:56
Это лучше сделать в виде патча под ie, дабы обыватель не колупал код страниц.
07 марта 2010 в 9:33
Мне иногда уже насрать на тех пользователей, которые используют Осла. Пусть делают выводы они, а не мы.
07 марта 2010 в 9:42
Это возможно только в случаи если сайт делается для себя. А вот если в ТЗ прописана кроссбраузерность, начинается головная боль.
16 июня 2011 в 7:16
а как картинку прописать?
16 июня 2011 в 9:51
чтобы ИЕ понимал полупрозрачный png тоже приходится выполнять, не нужный по сути, финт ушами и подключать дополнительный мусор. этот вариант проще и и чище.