rimmer333 10 авг 2007 в 09:12

3 лекарства для Ослика

3 мин

1.4K

Чулан

+31

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

topcreative 10 авг 2007 в 09:33

Для поддержки полупрозрачности (альфаканалов) .PNG пользуюсь следующим методом:

<img src="images/name.png" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/name.png);" alt="" />

Работает для ие6, фф и оперы

rimmer333 10 авг 2007 в 09:34

Ну вот, а теперь со вторым и третьим решением можно просто <img src="images/name.png">

topcreative 10 авг 2007 в 09:37

забыл добавить ширину и высоту.

<img src="images/name.png" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/name.png); width:expression(1); height:expression(1);" alt="" />

shergin 10 авг 2007 в 10:59

Да ты что?! Правда?.. А вышеописаные способы по твоему используют черную магию, а не DirectX?

Ruberoid 10 авг 2007 в 13:30

За что заругали человека? Он абсолютно прав.

Ruberoid 10 авг 2007 в 13:31

Мда, непонятно выразился, shergin — вы правы!

Ackem 10 авг 2007 в 11:14

а если много картинок png???
не интересно писать для каждой!

chx 10 авг 2007 в 11:22

ФФ и опера поддерживают png. Для них не нужно хаков. Зато они не поддерживают специфически некрософтовых технологий типа directx или activex.

alls 10 авг 2007 в 16:26

Но хоть плагины activex появились для них ) Тут писали )
А вообще фф то рулит!

brammator 20 янв 2010 в 10:45

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

topcreative 20 янв 2010 в 11:10

cyberklin 10 авг 2007 в 10:53

спасибо, пригодится.

lautsevich 10 авг 2007 в 10:56

непонятно, зачем эмулирование псевдо класса :hover для IE7? она и так научился это понимать.

rimmer333 10 авг 2007 в 10:58

А для IE7 никто его эмулировать и не просит. Читайте статью. Вызов whatever:hover пакуйте в отдельный CSS, линкуйте его в conditional comment

dreamwind 10 авг 2007 в 10:57

имхо, проще в индивидуальных случаях писать обходные пути, чем использовать такие "навороченные" методы. Пока есть .gif, прозрачность .png не сильно требуется. А (почти) все эффекты можно сделать и на ссылках (или дополнительно вгружать выставление своих обработчиков на window.onload).

lautsevich 10 авг 2007 в 11:00

вот уж дудки. при современной графике, палитра GIF далеко не всегда позволяет добиться приемлимого результата

dreamwind 10 авг 2007 в 11:21

супер, сразу и минусовать.
Если вам какие-то навыки не позволяют использовать .gif вместо .png, либо вы хотите "супер картинки" для пользователей, то пожалуйста.
Я говорю с позиций наибольшей совместимости и простоты разработки.

chx 10 авг 2007 в 11:23

бывают задачи, когда требуется разместить изображение фотографического качества, но с полупрозрачностью. Сделаете это гифом?
Кстати, гиф умеет ПОЛУпрозрачность?

topcreative 10 авг 2007 в 11:29

нет, гиф не держит альфаканалы

chx 10 авг 2007 в 11:35

значит мой склероз меня не подводит. Гиф умеет отображать полностью прозрачным один цвет. А в свете "новых" тенденций в дизайне это ну никак не катит.

Klaus 10 авг 2007 в 19:38

Вот бы все помирились и стали правильно SVG показывать. А там через CSS3 Любую прозрачность, скрипты и вектор.

chx 10 авг 2007 в 19:43

и наступило бы вселенское счастье :)

Klaus 21 авг 2007 в 07:27

Просто от «Браузерных Войн» страдают в основном верстальщики, а следовательно и пользователи. Если б все нормально приняли SVG страницы уже давно можно было бы верстать как картинку. Это был бы прорыв в дизайне.А так тянут одеяло каждый на себя. Печально.

chx 21 авг 2007 в 10:19

ну как тут не согласиться?
Но только пока этого не произошло, приходится изобретать костыли.

dreamwind 10 авг 2007 в 11:31

обычно изображение фотографического качества размещают на сервере и дают на него ссылку, ибо это несколько (десятков) мегабайт. Если вам нужно просто красивую картинку в броузере вывести в определенных случаях, и это неудобно делать через .jpg, то да, тут не поспорю. Но, имхо, таких случаев единицы, и ради них как-то извращаться. Брр... лучше юзать хаки подобно описанным чуть ниже.
Статья, как я понял, посвящена массовому использованию .png в вебе. Имхо, она не настолько актуальна, как хочется некоторым комментирующим пользователям.

BeeVee 10 авг 2007 в 11:47

Альфа-канал очень нужен.
Точно вам говорю.

dreamwind 10 авг 2007 в 12:03

да я согласен, но изыски на эту тему отношу к области фантастики: по типу хаков для min-width и прочих "перелестей" IE.

Спасибо плюсанувшему

BeeVee 10 авг 2007 в 12:18

Изыски даже вредны. Если их не применять, обладатели ИЕ6 быстрее осознают инвалидность своего браузера. :)

chx 10 авг 2007 в 16:34

далеко не все способны осознать инвалидность браузера. До сих пор встречаются люди, которые неимоверно удивляются, когда узнают, что ИЕ - не единственный браузер.
Нужна пропаганда по типу сарафанного радио.
А вообще, конечно да. С распространением ИЕ7 лично я во многих проектах полностью откажусь от использования большинства ие-хаков. А сейчас уже отказываюсь от некритичных. Ну что поделать, если охота красиво, а браузер так не умеет?

zw0rk 16 сен 2007 в 14:49

До сих пор (часто) попадаются люди, которые неимоверно удивляются слову "браузер"..

micle 5 мая 2008 в 13:18

Кхм... Тут вот год почти прошел... Теперь Вы не считаете это «изыском», надеюсь? :)

sunnybear 5 мая 2008 в 14:11

я считаю это грубым хаком, но уже по совершенно другой причине: есть более изящное решение (представленное в рунете впервые Павлом Корниловым), которое обходится без .htc и проч.

подробнее
http://webo.in/articles/habrahabr/10-css…

т.е. точка зрения поменялась на противоположную 2 раза :)

rimmer333 10 авг 2007 в 11:33

Вы это дизайнерам объясните. У них полет фантазии, градиенты, тени и закругленные уголки. На фоне других градиентов и теней. Вот и приходится выкручиваться.

chx 10 авг 2007 в 11:36

ну, кстати, дизайнерам иногда надо объяснять. Их если не осаживать, зачастую напрочь забывают о том, что такое веб.

rimmer333 10 авг 2007 в 11:42

Кстати, во многих случаях удается выкрутиться даже без PNG. Apple раньше это гениально делала на своем сайте, когда PNG еще не было.

chx 10 авг 2007 в 11:50

например как? У меня не всегда получается.

rimmer333 10 авг 2007 в 11:57

Ну у них просто всегда было известно, на каком фоне располагается изображение. Они сливали обтравленную картинку с фоном нужного цвета/текстуры и гнали это просто JPEG-ом. Но результат был с виду явно отличающийся от иллюстраций на других сайтах - картинка визуально полупрозрачная, «не квадратная». При нынешней моде в дизайне у них так уже не получается, PNG уже необходим. Кстати, IE PNG Fix htc разработан на основе эппловских изысканий на эту тему.

BeeVee 10 авг 2007 в 12:20

В фотошопе есть замечательная возможность при сохранении gif указать параметр matte — предполагаемый фон, на котором будет лежать изображение. При этом полупрозрачные области автоматически окрашиваются в этот цвет, и получается очень даже ничего, даже если совпадение с фоном не 100%-е.

rimmer333 10 авг 2007 в 12:24

Верно, у гифа только палитра узковата для некоторых применений, но в целом я так часто делаю. А еще вот тема: http://www.artlebedev.ru/tools/technogre…

lautsevich 10 авг 2007 в 12:53

между прочим, я не минусовал вас

diamant 10 авг 2007 в 13:11

gif проприетарный формат

khim 10 авг 2007 в 14:47

Де-юре - да, а де-факто... IMNSHO формат, описание которого лежит на W3C можно спокойно пользовать - как бы он там ни числился: GIF89a Specification

diamant 10 авг 2007 в 15:32

ага, сперва написал, а потом глянул в Вики :)
последний патент истёк в прошлшом году

beshenov 10 авг 2007 в 22:07

Раньше FSF и компания проводили агитацию против GIF, не принимали в GNU пакеты, где были гифы, etc… Так что ваши опасения по поводу проприентарности формата имеют почву :-) Как только патент истек, шумиха пропала.

diamant 11 авг 2007 в 09:41

ну я помню :)
гиф и не использовал :)

anortorn 10 авг 2007 в 15:22

Небольшое уточнение: Срок действия последнего патента на GIF (а точнее - на алгоритм сжатия LZW, использующийся в GIF) истёк 11 августа 2006 года. Формат больше не проприетарен.

diamant 10 авг 2007 в 15:31

ага, сперва написал, а потом глянул в Вики :)

Jenek 10 авг 2007 в 16:03

Ха, такая прозрачность как в gif отлично работает в png в любом експлорере, проблемы только с альфа-каналом.

Пример прозрачного png без дополнительных стараний: http://designformasters.info/stuff/creat… (смотреть в IE6)

kvas 10 авг 2007 в 20:14

Что-то у меня в IE6 никакая прозрачность в .png не работала. Рисовал вместо прозрачных пикселов фон и всё.

Jenek 10 авг 2007 в 20:30

А что еще ему рисовать вместо прозрачных пикселей?

Подложил, под изображение текст посмотрите еще раз.

kvas 10 авг 2007 в 22:05

Да нет, я имею ввиду что "такая прозрачность как в gif отлично работает в png в любом експлорере" — неверное утверждение. У меня в 6-м не работает, а рисует всё время какой-нибудь серенький фон независимо от фона под картинкой. Это всё без хаков, просто .png с прозрачным фоном.

kvas 10 авг 2007 в 22:07

Или у вас там какой-то хитрый .png, который IE понимает, я-то говорил про свои обычные .png из фотошопа. Ваш попробую в понедельник на работе, дома у меня нет IE.

Jenek 10 авг 2007 в 22:22

В фотошопе сохранять нужно в png-8 тогда прозрачность будет как в gif, в png-24 сохраняется альфа-канал. Это ограничение фотошопа, а не png.

kvas 10 авг 2007 в 23:38

О, спасибо! Буду знать.

Jenek 10 авг 2007 в 20:33

извиняюсь забыл залить, сейчас готово

caIIIa 16 авг 2007 в 11:02

Вы привели беспредельное враньё в качестве аргумента, 8-битные png IE и так кушает, только толку от них в данном контексте никакого - полупрозрачности в них не бывает!!!

Jenek 16 авг 2007 в 11:21

На фразу: Пока есть .gif, прозрачность .png не сильно требуется.
Я ответил: Такая прозрачность как в gif отлично работает в png в любом експлорере, проблемы только с альфа-каналом.

Где я соврал????

caIIIa 16 авг 2007 в 11:48

Простите великодушно, я про alpha не увидел за фразой "Пример прозрачного png без дополнительных стараний" - слишком уж многообещающе, а оказалось так же, как GIF :()

Jenek 16 авг 2007 в 11:56

Ничего, бывает.

glazs 31 авг 2007 в 11:07

А какое отношение прозрачность имеет к полупрозрачности, которую собственно и фиксит альфалоадер?

Jenek 31 авг 2007 в 11:46

А если почитать ветку?

>Пока есть .gif, прозрачность .png не сильно требуется.

>>Такая прозрачность как в gif отлично работает в png в любом експлорере, проблемы только с альфа-каналом.

>>>А какое отношение прозрачность имеет к полупрозрачности, которую собственно и фиксит альфалоадер?

:)

Jenek 10 авг 2007 в 16:13

А еще png8 жмет графику процентов на 20% лучше чем gif (а иногда в 4 раза лучше, но это редко), хотя для совсем маленьких изображений (10х10 пикселей и меньше) gif все-таки лучше.

И еще: Креативное использование полупрозрачных PNG в веб-дизайне

shergin 10 авг 2007 в 10:57

Это все давно известно и невсеобъемлюще. В частности, использовать behavior/htc для фикса альфа-канала некорректно и для больших проектов невозможно (тут подробно описано почему и приводится альтернативный метод: http://tigir.com/alpha_png.htm).
Всех «убогих» пользователей убогого IE надо не поддерживать, а топить в прорубе.

chx 10 авг 2007 в 11:19

топить можно будет только когда их реально останется менее 30%

kvas 10 авг 2007 в 20:20

Если хорошо топить, то быстрее останется менее 30% :)

chx 13 авг 2007 в 06:52

Да. Но тут надо не перегнуть палку. Отказавшись сейчас полностью от поддержки ИЕ6 разработчик сделает хуже только себе.

kvas 13 авг 2007 в 08:08

Да я понимаю, не зря-ж у меня там смайлик в конце предложения...

chx 10 авг 2007 в 11:24

спасибо. Все проблемы насущные. Будем пробовать и разбираться.

GeniyZ 10 авг 2007 в 12:49

Вообще-то gif умеет ТруКолор: http://phil.ipal.org/tc217.gif
А полупрозрачность реализовывать какими-то кривыми средствами ради совместимости с кривыми браузерами == поддерживать эти самые кривые браузеры.
Но, как говорится, "Хозяин - Барин". И заказчику не донесёшь свои идеалогические стремления, так что не следует пренебрегать поддержкой IE, а то и без средств к существованию можно остаться.
--
P.S.: Еслиб PNG умел анимироваться или в браузерах (хотяб FF) была нормальная поддержка MNG я б от GIF'а отказался б полностью.

rimmer333 10 авг 2007 в 12:54

Это как вообще сделано?

GeniyZ 10 авг 2007 в 13:29

У гифа ограничение в 256 цветов на слой, а не на изображение вцелом.
Если вы об этом.

nofrom 10 авг 2007 в 15:33

Реализовывать полупрозрачность ради совместимости с кривыми браузерами == уважать пользователей и не забывать, для кого сайты делаются.

Не для сообщества маздаененавистников или прочих холиварщиков.

sashabe 10 авг 2007 в 12:53

Было бы интересно, если бы кто-нибудь сделал список багов и хаков не для IE 6, (у которого они изучены вдоль и поперек), а для IE 7 - у него болячек не меньше.

DeMx 10 авг 2007 в 13:33

Ошибаетесь, меньше.

sashabe 10 авг 2007 в 15:32

Вот и докажите, всем полезно будет.

chx 10 авг 2007 в 19:08

а новых пока не замечено.
Устранены многие баги ие6, но не все.

xOr 10 авг 2007 в 14:03

Для "накидывания" полупрозрачности, можно воспользоваться конструкцией CSS expression.
В код страницы включить:

<script language="javascript">
function PNG(element)
{
if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent))
{
var src;

if (element.tagName=='IMG')
{
if (/\.png$/.test(element.src))
{
src = element.src;
element.src = "images/1x1.gif";
}
}
else
{
src = element.currentStyle.backgroundImage.match(/url$"(.+\.png)"$/i)
if (src)
{
src = src[1];
element.runtimeStyle.backgroundImage="none";
}
}

if (src) element.runtimeStyle.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
}
}

function horton() {
document.location = "/content/Presscenter/news/news22";
}
function peshi() {
document.location = "/content/Presscenter/news/5072007_action";
}
function esppban() {
document.location = "/content/ESPP";
}
</script>

<style type="text/css">
.png { filter:expression(PNG(this)) }

</style>

А в тег элемента, к которому нужно подключить обработчик (IMG и любой элемент в котором PNG-картинка сделана фоном), прописать class="png".

xOr 10 авг 2007 в 14:07

Сори за левые функции horton, peshi, esppban. Копипастил из кода работающей страницы :)

Spy 11 авг 2007 в 11:01

интересно, спасибо

Nightquest 10 авг 2007 в 15:32

Сегодня как раз возился с PNG. Статья как раз в десятку, хотя добить проблему так и не удалось — IE6 не воспринимал (юзал filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=bzz.png)).

topcreative 10 авг 2007 в 16:41

вот пример работающиъ альфа-каналов. реализовано в логотипе и меню

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

topcreative 11 авг 2007 в 05:24

Мнение твое субъективно и необоснованно.

rimmer333 13 авг 2007 в 06:13

Забавно, но в этой конкретной ситуации не очень-то нужно. Здесь как раз можно обойтись gif. Но за рабочий пример спасибо!

besisland 10 авг 2007 в 17:50

В страницы, но обязательно после META content-type пишем:


А если я использую исключительно XHTML 1.1, и meta content-type у меня нет и в помине?

skylix 10 авг 2007 в 18:21

Просто в хедере.

rimmer333 13 авг 2007 в 05:24

Ко всяком у решению приведен адрес его сайта и имя автора. Можно почитать там, можно связаться с автором.

chx 10 авг 2007 в 19:13

только что опробован третий способ.
Детально ещё не изучалось, но min-width работает (min-height почему-то нет).
На этом же проекте png в фоне будет проверено.

asanov 11 авг 2007 в 11:48

Стоить заметить, что при использовании png-изображения в качестве фона, не будет работать не только повторение изображения (background-repeat) но и выравнивание этого фона по правому краю.

Glook 14 авг 2007 в 12:58

Вы неправы!
Загружая png через скрипт можно сделать его как одиночным, так и повторяющимся фоновым изображением.
Насчёт позиционирования ( а не только выравнивания по правому краю) — это дейсвительно так: background-position не работает. Во всяком случае ничего подобного не встречал.

orlovsky 15 авг 2007 в 05:46

C IE7 от Dean Edwards работал достаточно продолжительное время и наткнулся на одну особенность: на сайтах даже с небольшим количеством абсолютно-позиционированных divов он начинает достаточно сильно тормозить, при этом такое ощущение, что торможение экспоненциально возрастает с увеличением числа этих самых divов. Второй момент - по каким-то причинам в таких условиях он не успевает обработать все элементы страницы (IE прерывает долгоиграющие скрипты? циклические зависимости в позиционировании? - мне так установить и не удалось) и layout расползается совершенно произвольным образом (кажлый раз по разному), при этом изменение размеров окна часто исправляет ситуацию.

В конечном итоге я отказался от решения Dean Edwards и стал использовать (а) IE conditional comments, (б) где возможно gifы, (в) где невозможно - png с требуемым цветом фона только для IE в conditional comments, (г) позиционирование с использованием CSS expressions (опять же включенное только для IE6).

DeadLy 18 мар 2008 в 08:19

А как сделать чтобы была полупрозрачность если доктайп такой:
"
"
никто не знает?

DeadLy 18 мар 2008 в 08:20

порезали)) ещё раз

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DeadLy 18 мар 2008 в 08:22

Блин, да что за фингя, короче как быть если доктайп такой?

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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