Кроссбраузерная одноцветная полупрозрачность

[gryzzly]

спасибо, здорово.

хороший пример использования rgba с graceful degradation можно увидеть на 24ways.org/

только, наверное, не «внуки», а «дети» или «потомки»?

[Panya]

Да, потомки хорошо. Исправил.

[BnetAngel]

Взял на заметку.

[VDG]

FF 3.0.5 (Win)
черный кирпич, никакой прозрачности

[BnetAngel]

FF 3.0.5 (Win)
Все прозрачно

[Slash]

все нормально

[VDG]

полупрозрачным стало только после перезагрузки страницы

[SCT]

Отличный пример, большое спасибо!

[VasilioRuzanni]

Думаю, «ниже IE6» уже как таковым недостатком-то не является.

[Panya]

Какой источник? Это и есть оригинал.

[darkside]

немного офтопа. может в каскадные таблицы перенести? как-то точнее получится.

[Panya]

В смысле? position:relative обязательное условие, но внутри элемента с positon:relative могут быть также любые другие элементы, например с position:absolute, и они тоже будут непрозрачными. И hasLayout если будет глючить можно дать.

[Panya]

Ну вот пример: http://markup.xtreemhost.com/opacity/opacity_example.html. Вроде все нормально.

[Panya]

Как-то Вы странно JS выключаете, потому как фильтры к JS не имеют никакого отношения. А много памяти жрет из-за фильтра, это неизбежно.

[deerua]

ИЕ5.5 арбайтен гут :) в 5.0 fail ;)

[Panya]

в 5.5 тоже fail так как контент тоже становится полупрозрачным

[striker_vlad]

всё равно понтово :)

[hulinada]

>Для этого можно использовать свойство opacity, но все знают, что оно применяется не только к самому элементу, но и к его детям
Не помню точно, но я внутрь полупрозрачного блока ставил еще один блок с непрозрачным опасити (то бишь = 1 или 100) и всё было тип-топ =)

[Panya]

Нет, так не получится.

[hulinada]

тоочно. извиняюсь, помню боролся с такой проблемой и там всё-таки использовал пнг.

[KJouflay]

А можно полупрозрачный блок, сделать округлённым? А точнее, закруглить уголочки?

[Panya]

Можно. То что представлено тут это середина такого блока, как делать скругленные уголки много где написано.

[CAH4A]

Пример

[rengo]

А зачем этот кусок?

html {
font-size:100.01%;
}

[bolk]

Чтобы одинаковый размер был во всех браузерах, погуглите, это известная штука.

[Panya]

Чтобы с размером шрифта во всех браузерах было все нормально.

[Tishka17]

кстати, в opera 10 RGBA работает (-;

[sunnybear]

для IE тогда можно еще через mhtml сделать :)
webo.in/articles/habrahabr/46-cross-browser-data-url/

[sunnybear]

почему? mhtml понимается с IE5 или IE5.5

[sunnybear]

alphaImageLoader?

[sunnybear]

ну, можно еще vml :)

[Ogra]

Вот все бы извращаться ;)
Четырехпиксельный гиф у которого 2 пикселя прозрачны, а 2 черные работает везде без проблем.
А если зерно мониторов таки будет уменьшаться, то будет работать все лучше и лучше

[Lex85]

Дык смысл-то как раз в отсутствии дополнительной картинки.
По сабжу — в избранное!

[padonaque]

Сталевар-алкаш Вася с недоумением смотрит на dvd-плеер Сони и думает: «вот извращенцы, нет бы сделать, что бы видео-кассеты проигрывались».

[Vilz]

перфокарты

[dyakov]

За интересные идеи спасибо.
Только не следует забывать, что можно простую png-картинку фоном ставить. Поддержка сразу везде, кроме IE6, а вот для него уже изврат с alfa и relative
Это я просто напоминаю чтобы не зацикливались читающие эту тему)

[Panya]

Я это знаю, но хотелось как раз избавиться от лишнего запроса на такую маленькую картинку.

[Vilz]

от лишнего запроса к картинке избавляемся, зато добавляем кучу кода и 3 костыля вместо одного…
Мне кажется лучше использовать 1 общее, универсальное решение…
По крайней мере до стадии оптимизации проекта

хотя за способы большое спасибо, про (Data:URI) не знал

[Panya]

Где 3? Я насчитал только один (position: relative для потомков).

[Vilz]

ну как где?
1. background:url(data:image/png;base64,iVBORw0KG...);
2. background:rgba(0, 0, 0, 0.5);
3. filter:alpha(opacity=50);

[Panya]

Какие же это костыли? Dara:URI это стандарт. В том случае, когда все браузеры будут поддерживать RGBA (что тоже стандарт), можно будет убрать эту строчку. Пока же, те браузеры, которые уже поддерживают RGBA получают бекграунд через rgba. Progressive enhancement на лицо. 3 согласен, костыль, но если вы будете делать через полупрозрачную загружаемую картинку, то вам тоже придется использовать фильтр, только не Alpha а AlphaImageLoader. Поэтому в данном случае, по костылям получается один (AlphaImageLoader) против двух (Alpha + position:relative у потомков).

[Vilz]

ладно уговорили :) не костыли
в любом случае при необходимости что-то изменить, придётся ковыряться в трёх местах, вместо одного, это может вызвать путанницу, особенно если решение для ие выносить в отдельный файл

[fatal]

Костыль, действительно, только один для IE6:
filter:alpha(opacity=50) и position:relative для потомков.
Остальное всё стандартно совешенно — используются приемущества прекрасной деградируемости CSS.

[fatal]

Делаю точно так же, только какртинки подгружаю :)
Только, вот, с Opera 10 и таблицами засада — она не поддерживает нормально RGBA для ячеек таблицы (цвета COL за ячейками не видно).
Я отправил эту ошибку уже.

[fatal]

Про трюк с IE6 и 7 не знал, спасибо!

[pepelsbey]

Для IE есть такой трюк:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000050,endColorstr=#00000050);

HEX-цвет + прозрачность

[Panya]

Ага, спасибо. Тогда можно сделать поддержку еще и для IE 5.5.

[AntonShevchuk]

наоборот — альфа канал + цвет

msdn.microsoft.com/en-us/library/ms532879(VS.85).aspx

[pepelsbey]

Гм, да — перепутал. Спасибо

[fatal]

Кстати, как вариант борьбы с IE6, можно оставить его без прозрачности, использовав PNG8, если это позволяет дизайн.

[Sef4eg]

для борьбы с IE6 лучше сложиться на двухстволку и сокращать количество юзеров, которые им пользуются :)

[iPacman]

Можно в .opacity положить контейнер (например div class='opacity-content') и назначить position:relative только ему вместо пугающего
.opacity * {position:relative;}

[boston]

Еще одна хорошая статья про прозрачность была у Чернева chernev.ru/pravilnaya-prozrachnost.html, демо: chernev.ru/css-opacity/

[almalexa]

До кучи The data: URI kitchen

[metakey]

Не работает, см. скриншот

img13.imageshack.us/img13/5417/ffailbl7.png

[metakey]

Пардон, не заметил ссылку «конечный результат».

[caIIIa]

Весьма интересно, кроме IE, в котором происходит непонятный кирдык сглаживанию шрифтов в блоке.
Чудеса в решете — установленный в системе IE7 не сглаживает текст, IE6 через IETester — сглаживает…

[caIIIa]

Интересно, какой фильтр включает его обратно…

[Panya]

Да, это проблема всех фильтров: http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx. Там в комментах советуют давать background-color, но он у нас уже установлен.

[Vasylko]

В примере автора статьи картинка является полноцветной, что увеличивает время загрузки. Возможно лучше работать с таблицей и вставить бегграундом в блоке оптимизированный и полупрозрачний рисунок png

[Dolka]

У меня почему-то при абсолютном позиционировании прозрачного блока в IE6, IE7 дочерние элементы тоже становятся прозрачными, это никак нельзя исправить?

[Panya]

Можно сделать, через фильтр Gradient, как предлагают тут: habrahabr.ru/blogs/webdev/50996/#comment_1345139 (только в комментарии неточность, значение прозрачности надо писать перед RGB: #50000000), но прозрачность будет не совсем такая, нужно экспериментировать. Либо, можно обернуть то, что внутри элемента с position:absolute в какой-нибудь другой элемент (с position:static) и перевесить фильтр Alpha на него. Вообще, не рекомендую давать фильтры элементам, значение свойства position которых отлично от static. Могут возникнуть проблемы связанные с обрезанием контента, который выходит за границы блока, или полным исчезновением элемента.

[assTeT]

У меня возникла проблема с этим методом, если внутри прозрачного блока располагать, скажем, список или таблицу, то в IE ничего не отображается.
Причем с инлайновыми элементами и c div'ом все показывает.
Кто-то еще сталкивался с подобным?

[IonDen]

Вы не могли бы переложить картинки на хаброэффект.ру например?

[Panya]

Можно считать, что переложил ;)

[nicothin]

markup.xtreemhost.com/opacity/ie.html — в FF 3.6 блок имет непрозрачный черный фон. в других примерах все хорошо.
или это у меня с браузером что-то не так?

[Panya]

URL как бы намекает, что этот вариант только для просмотра в IE. Внизу есть ссылка на финальный кроссбраузерный вариант.

[eno_one]

громадное спасибо! Сэкономили кучу нервов! и спасибо за data!