Как вы боретесь с PNG при верстке?

[@Snart]

Сам пользуюсь третьим вариантом, у всех методов свои недостатки, с htc файлом и с широкоизвестным javascriptом(который 4й вариант, не помню, чей это метод правда) — намного более глючные вещи, чем 3-й метод.

p.s.: Скажите, может человечество что то уже придумало для использования PNG с 8-битным альфа каналом в качестве повторяющегося фона?

[@lusever]

Еще нет

[@Yeah]

уже да!
сам так делаю: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod=scale)
Hf,jnftn только при повторении фона в одном направлении: или repeat-x или repeat-y

[@Snart]

Я что-то недопонимаю, или sizingMethod=scale это растягивание?

[@lusever]

Повторяющийся от тянущего все-таки различается :(

[@kulikoff]

Я с PNG не борюсь, я его использую :)

[@CaptW]

=) действительно, зачем с ним бороться то)

[@lusever]

.izvrat-plus-div
{
behavior : expression(
(runtimeStyle.behavior==''&¤tStyle.backgroundImage!='none') ?
insertAdjacentHTML('afterBegin', '<div class="ie"" style="height:1;width:1;position:absolute;'
+((currentStyle.backgroundPositionX!='100%'&¤tStyle.backgroundPositionX!='right') ? 'left:'+((currentStyle.backgroundPositionX == 'left') ? 0 : currentStyle.backgroundPositionX ) : 'right:0')+';'
+((currentStyle.backgroundPositionY!='100%'&¤tStyle.backgroundPositionY!='bottom') ? ';top:'+((currentStyle.backgroundPositionY == 'top') ? 0 : currentStyle.backgroundPositionY ) : 'bottom:0')
+';filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=crop)">'+'<img src="'+currentStyle.backgroundImage.split('\"')[1]+'" alt="" style="visibility:hidden" /></div>') : '',
runtimeStyle.backgroundImage = 'none',
runtimeStyle.behavior = 'none'
);
}

[@lusever]

По css мотивам

[@Snart]

Супер! Спасибо

[@gunkin]

Вопрос: а не тормозит это дело, тут, так сказать, правильный expression? Или лучше JS всё же?

[@lusever]

Статью то читали? Ни капельки, даже быстрее :) Одно условие, position: relative обязательно должен быть у контейнера.

[@gunkin]

Вот как, прочитал всё, тоже скажу спасибо.

[@DeadLy]

а я по мотивам
http://komodomedia.com/blog/index.php/20…

[@lusever]

Отличная замена htc, но игнорирует позицию бэкграунда.

[@Ad_Astra]

в общем, у меня свой стиль вёрстки таков, что вся подобная графика пихается в бэкграунд (да, в коде страницы у меня исключительно функциональные изображения-ссылки, где PNG явно избыточен). А посему - для всех нормальных браузеров обычное свойство background-image, а для MSIE 6 версии - условный комментарий с AlphaImageLoader и background-image: none.

[@aky_pp_ru]

+1

[@tuzhilkin]

Чаще использую 3 способ.

Сразу вопрос!!! Кто нибудь делал так что бы при наведении на ссылку ( :hover ) подгружалась др. картинка в бэграунд!?

[@gunkin]

При использовании progid:DXImageTransform.Microsoft.AlphaImageLoader бывает, что в IE6 у текста, лежащего внутри элемента с таким background'ом, пропадает сглаживание.

[@wiktar]

Я наверное не в теме.

А что за проблемы с png, что приходится использовать какие-то спец.приёмы?

[@Snart]

Проблемы с прозрачностю PNG(с 8-битным альфа-каналом) в IE

[@Over]

Пользуюсь и первым и шестым методами.

[@Astralian]

А вторым способом это не кошерно?

[@lumen]

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

[@Snart]

Я для себя третий считаю наилучшим, тоже совсем не глючит

[@Hitryi_Pryanik]

Толком и не пользовался. В основном там, где мне нужны были полупрозрачности делал дырявый gif (стирал отдельные пиксели). Пример — myltik.ru, главное меню, правый кусочек ползающий.

[@Ainur]

Так как использую Jquery просто добавляю плагин ifixpng

[@Horizontal]

А я один использую такой хак для IE:
* html a{
background: url(IE.jpg);
}

[@Snart]

А что это дает?

[@Horizontal]

То, что для всех браузеров
a {
background: url(bg.png);
}
, а для Особенного - IE.jpg, где вместо прозрачности - фон родителя.

[@habrich]

Я редактирую готовый рисунок PNG с прозрачностью в Gimp'e: меняю режим на индексированный с параметрами по умолчанию и сохраняю рисунок с опцией "Сохранять значение цвета прозрачных точек". В IE и других браузерах отображается одинаковая картинка с прозрачностью. В фотошопе так и не получилось сохранить с индексированным цветом =(

[@StopDesign]

Это работает! Спасибо!!!

Только что проверил в IE 6.0 - всё идеально!!! Жаль, что вручную нужно править png. Вот если бы кто подсказал утилиту, которая делает то же самое... Пойду поищу в GIMP'е средства автоматизации :-)

[@StopDesign]

Однако, не всё так хорошо оказалось... Alpha-канал убивается и остается только один бит на прозрачность. Проще GIF использовать.

[@habrich]

Да, вот и недостаток нашелся. Получается, многое для IE через костыли =), вот бы посчитать их количество. Тогда GIF, а если нужно качество и многобитная прозрачность, то придется ломать голову этими костылями.

[@Snart]

Вот целых две: pngcrush, pngout

[@diversiya]

Тут есть одна проблема: если необходимо прозрачное изображение, скажем подложка для меню с прозрачностью 50%? Тут этот способ не работает.

[@habrich]

Да-да, этот костыль только для 100% прозрачности, о чем написал  StopDesign выше. Придется использовать хаки с фильтрами для IE :(

[@RommeDeSerieux]

Использую gif сравнительно редко, так как сжимает png намного лучше. Полупрозрачность же для IE6 и ниже не использую, так как все методы её показа основаны на одном — фильтрах Direct X, что приводит к скачиванию картинки при каждом отображении, минуя кэш.

[@aky_pp_ru]

Да интересный момент... чаще всего мне приходилось в png делать тени, градиенты.. это просто полоска... так что если уж и не кэшируется то хоть весит не много.

[@aky_pp_ru]

Behavior в CSS, png.htc и blank.gif
Javascript от уважвемого Tigir (function fixPNG(element))
Javascript с использованием window.attachEvent("onload", correctPNG)

Всё это безбожно тормозит... по крайней мере на непростой странице...
рекомендую не леницца и использовать 1 вариант

[@nayjest]

Мда, как только люди не извращаются )))
Не знал, что такое возможно без JS, может кому-то в определенных условиях такое и пригодится.

Спасибо за новый интересный метод, было очень познавательно!