rimmer333 Aug 10 2007 at 13:12

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

3 min

1.3K

Lumber room

+31

Comments 94

topcreative Aug 10 2007 at 13:33

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

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

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

rimmer333 Aug 10 2007 at 13:34

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

topcreative Aug 10 2007 at 13:37

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

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

shergin Aug 10 2007 at 14:59

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

-3

Ruberoid Aug 10 2007 at 17:30

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

Ruberoid Aug 10 2007 at 17:31

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

-1

Ackem Aug 10 2007 at 15:14

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

chx Aug 10 2007 at 15:22

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

alls Aug 10 2007 at 20:26

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

-1

brammator Jan 20 2010 at 13:45

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

topcreative Jan 20 2010 at 14:10

cyberklin Aug 10 2007 at 14:53

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

lautsevich Aug 10 2007 at 14:56

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

-1

rimmer333 Aug 10 2007 at 14:58

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

dreamwind Aug 10 2007 at 14:57

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

-10

lautsevich Aug 10 2007 at 15:00

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

dreamwind Aug 10 2007 at 15:21

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

chx Aug 10 2007 at 15:23

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

topcreative Aug 10 2007 at 15:29

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

chx Aug 10 2007 at 15:35

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

Klaus Aug 10 2007 at 23:38

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

chx Aug 10 2007 at 23:43

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

Klaus Aug 21 2007 at 11:27

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

chx Aug 21 2007 at 14:19

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

dreamwind Aug 10 2007 at 15:31

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

BeeVee Aug 10 2007 at 15:47

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

dreamwind Aug 10 2007 at 16:03

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

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

-2

BeeVee Aug 10 2007 at 16:18

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

chx Aug 10 2007 at 20:34

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

zw0rk Sep 16 2007 at 18:49

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

micle May 5 2008 at 17:18

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

sunnybear May 5 2008 at 18:11

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

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

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

rimmer333 Aug 10 2007 at 15:33

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

chx Aug 10 2007 at 15:36

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

rimmer333 Aug 10 2007 at 15:42

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

chx Aug 10 2007 at 15:50

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

rimmer333 Aug 10 2007 at 15:57

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

BeeVee Aug 10 2007 at 16:20

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

rimmer333 Aug 10 2007 at 16:24

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

lautsevich Aug 10 2007 at 16:53

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

diamant Aug 10 2007 at 17:11

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

khim Aug 10 2007 at 18:47

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

diamant Aug 10 2007 at 19:32

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

beshenov Aug 11 2007 at 02:07

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

diamant Aug 11 2007 at 13:41

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

anortorn Aug 10 2007 at 19:22

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

diamant Aug 10 2007 at 19:31

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

Jenek Aug 10 2007 at 20:03

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

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

kvas Aug 11 2007 at 00:14

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

Jenek Aug 11 2007 at 00:30

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

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

kvas Aug 11 2007 at 02:05

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

kvas Aug 11 2007 at 02:07

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

Jenek Aug 11 2007 at 02:22

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

kvas Aug 11 2007 at 03:38

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

Jenek Aug 11 2007 at 00:33

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

caIIIa Aug 16 2007 at 15:02

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

Jenek Aug 16 2007 at 15:21

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

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

caIIIa Aug 16 2007 at 15:48

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

Jenek Aug 16 2007 at 15:56

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

glazs Aug 31 2007 at 15:07

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

Jenek Aug 31 2007 at 15:46

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

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

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

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

:)

Jenek Aug 10 2007 at 20:13

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

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

shergin Aug 10 2007 at 14:57

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

chx Aug 10 2007 at 15:19

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

kvas Aug 11 2007 at 00:20

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

chx Aug 13 2007 at 10:52

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

kvas Aug 13 2007 at 12:08

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

chx Aug 10 2007 at 15:24

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

GeniyZ Aug 10 2007 at 16:49

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

rimmer333 Aug 10 2007 at 16:54

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

GeniyZ Aug 10 2007 at 17:29

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

nofrom Aug 10 2007 at 19:33

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

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

sashabe Aug 10 2007 at 16:53

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

DeMx Aug 10 2007 at 17:33

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

sashabe Aug 10 2007 at 19:32

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

chx Aug 10 2007 at 23:08

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

xOr Aug 10 2007 at 18: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 Aug 10 2007 at 18:07

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

-1

Spy Aug 11 2007 at 15:01

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

Nightquest Aug 10 2007 at 19:32

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

topcreative Aug 10 2007 at 20:41

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

UFO just landed and posted this here

topcreative Aug 11 2007 at 09:24

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

rimmer333 Aug 13 2007 at 10:13

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

besisland Aug 10 2007 at 21:50

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


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

skylix Aug 10 2007 at 22:21

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

rimmer333 Aug 13 2007 at 09:24

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

chx Aug 10 2007 at 23:13

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

asanov Aug 11 2007 at 15:48

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

Glook Aug 14 2007 at 16:58

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

orlovsky Aug 15 2007 at 09:46

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

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

DeadLy Mar 18 2008 at 11:19

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

DeadLy Mar 18 2008 at 11:20

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

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

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

DeadLy Mar 18 2008 at 11: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">