@Panya3 фев 2009 в 16:21

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

3 мин

13K

Веб-разработка *

+181

Комментарии 80

@gryzzly 3 фев 2009 в 16:35

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

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

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

@Panya 3 фев 2009 в 16:41

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

@BnetAngel 3 фев 2009 в 16:36

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

@VDG 3 фев 2009 в 16:37

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

@BnetAngel 3 фев 2009 в 16:39

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

@Slash 3 фев 2009 в 16:42

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

@VDG 3 фев 2009 в 16:42

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

@SCT 3 фев 2009 в 16:53

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

@VasilioRuzanni 3 фев 2009 в 17:11

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

НЛО прилетело и опубликовало эту надпись здесь

@Panya 3 фев 2009 в 17:14

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

НЛО прилетело и опубликовало эту надпись здесь

@darkside 3 фев 2009 в 17:17

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

НЛО прилетело и опубликовало эту надпись здесь

@Panya 3 фев 2009 в 17:27

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

НЛО прилетело и опубликовало эту надпись здесь

@Panya 3 фев 2009 в 17:56

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

НЛО прилетело и опубликовало эту надпись здесь

@Panya 3 фев 2009 в 21:01

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

НЛО прилетело и опубликовало эту надпись здесь

@deerua 3 фев 2009 в 17:23

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

@Panya 3 фев 2009 в 17:28

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

@striker_vlad 4 фев 2009 в 02:47

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

НЛО прилетело и опубликовало эту надпись здесь

@hulinada 3 фев 2009 в 17:52

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

@Panya 3 фев 2009 в 17:57

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

@hulinada 3 фев 2009 в 18:21

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

@KJouflay 3 фев 2009 в 18:07

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

@Panya 3 фев 2009 в 18:25

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

@CAH4A 3 фев 2009 в 23:11

Пример

@rengo 3 фев 2009 в 18:42

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

html {
font-size:100.01%;
}

@bolk 3 фев 2009 в 19:11

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

@Panya 3 фев 2009 в 18:46

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

@Tishka17 3 фев 2009 в 18:52

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

@sunnybear 3 фев 2009 в 19:17

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

НЛО прилетело и опубликовало эту надпись здесь

@sunnybear 3 фев 2009 в 20:11

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

НЛО прилетело и опубликовало эту надпись здесь

@sunnybear 3 фев 2009 в 20:30

alphaImageLoader?

НЛО прилетело и опубликовало эту надпись здесь

@sunnybear 3 фев 2009 в 21:00

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

@Ogra 3 фев 2009 в 19:40

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

@Lex85 3 фев 2009 в 20:16

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

@padonaque 3 фев 2009 в 20:38

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

@Vilz 3 фев 2009 в 21:53

перфокарты

@dyakov 3 фев 2009 в 21:02

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

@Panya 3 фев 2009 в 21:04

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

@Vilz 3 фев 2009 в 21:34

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

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

@Panya 3 фев 2009 в 21:38

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

@Vilz 3 фев 2009 в 21:51

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

@Panya 3 фев 2009 в 22:00

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

@Vilz 3 фев 2009 в 22:08

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

@fatal 3 фев 2009 в 22:02

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

@fatal 3 фев 2009 в 21:33

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

@fatal 3 фев 2009 в 21:34

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

@pepelsbey 3 фев 2009 в 21:36

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

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

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

@Panya 3 фев 2009 в 21:40

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

@AntonShevchuk 17 фев 2009 в 16:54

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

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

@pepelsbey 17 фев 2009 в 18:10

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

@fatal 3 фев 2009 в 21:41

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

@Sef4eg 4 фев 2009 в 04:26

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

@iPacman 4 фев 2009 в 04:49

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

@boston 4 фев 2009 в 05:09

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

@almalexa 4 фев 2009 в 10:59

До кучи The data: URI kitchen

@metakey 4 фев 2009 в 16:57

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

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

@metakey 4 фев 2009 в 16:58

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

@caIIIa 4 фев 2009 в 17:03

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

НЛО прилетело и опубликовало эту надпись здесь

@caIIIa 4 фев 2009 в 17:27

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

@Panya 4 фев 2009 в 17:50

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

@Vasylko 6 фев 2009 в 13:36

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

@Dolka 9 фев 2009 в 02:50

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

@Panya 9 фев 2009 в 13:54

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

@assTeT 1 апр 2009 в 06:59

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

@IonDen 27 янв 2011 в 14:56

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

@Panya 31 янв 2011 в 18:34

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

@nicothin 30 янв 2011 в 21:40

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

@Panya 31 янв 2011 в 18:26

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

@eno_one 6 апр 2012 в 08:45

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

Зарегистрируйтесь на Хабре, чтобы оставить комментарий