Comments 43
Сам пользуюсь третьим вариантом, у всех методов свои недостатки, с htc файлом и с широкоизвестным javascriptом(который 4й вариант, не помню, чей это метод правда) намного более глючные вещи, чем 3-й метод.
p.s.: Скажите, может человечество что то уже придумало для использования PNG с 8-битным альфа каналом в качестве повторяющегося фона?
p.s.: Скажите, может человечество что то уже придумало для использования PNG с 8-битным альфа каналом в качестве повторяющегося фона?
Я с PNG не борюсь, я его использую :)
.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'
);
}
{
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'
);
}
Вопрос: а не тормозит это дело, тут, так сказать, правильный expression? Или лучше JS всё же?
а я по мотивам
http://komodomedia.com/blog/index.php/20…
http://komodomedia.com/blog/index.php/20…
в общем, у меня свой стиль вёрстки таков, что вся подобная графика пихается в бэкграунд (да, в коде страницы у меня исключительно функциональные изображения-ссылки, где PNG явно избыточен). А посему - для всех нормальных браузеров обычное свойство background-image, а для MSIE 6 версии - условный комментарий с AlphaImageLoader и background-image: none.
Чаще использую 3 способ.
Сразу вопрос!!! Кто нибудь делал так что бы при наведении на ссылку ( :hover ) подгружалась др. картинка в бэграунд!?
Сразу вопрос!!! Кто нибудь делал так что бы при наведении на ссылку ( :hover ) подгружалась др. картинка в бэграунд!?
При использовании progid:DXImageTransform.Microsoft.AlphaImageLoader бывает, что в IE6 у текста, лежащего внутри элемента с таким background'ом, пропадает сглаживание.
Я наверное не в теме.
А что за проблемы с png, что приходится использовать какие-то спец.приёмы?
А что за проблемы с png, что приходится использовать какие-то спец.приёмы?
Пользуюсь и первым и шестым методами.
А вторым способом это не кошерно?
Толком и не пользовался. В основном там, где мне нужны были полупрозрачности делал дырявый gif (стирал отдельные пиксели). Пример — myltik.ru, главное меню, правый кусочек ползающий.
Так как использую Jquery просто добавляю плагин ifixpng
А я один использую такой хак для IE:
* html a{
background: url(IE.jpg);
}
* html a{
background: url(IE.jpg);
}
Я редактирую готовый рисунок PNG с прозрачностью в Gimp'e: меняю режим на индексированный с параметрами по умолчанию и сохраняю рисунок с опцией "Сохранять значение цвета прозрачных точек". В IE и других браузерах отображается одинаковая картинка с прозрачностью. В фотошопе так и не получилось сохранить с индексированным цветом =(
Это работает! Спасибо!!!
Только что проверил в IE 6.0 - всё идеально!!! Жаль, что вручную нужно править png. Вот если бы кто подсказал утилиту, которая делает то же самое... Пойду поищу в GIMP'е средства автоматизации :-)
Только что проверил в IE 6.0 - всё идеально!!! Жаль, что вручную нужно править png. Вот если бы кто подсказал утилиту, которая делает то же самое... Пойду поищу в GIMP'е средства автоматизации :-)
Однако, не всё так хорошо оказалось... Alpha-канал убивается и остается только один бит на прозрачность. Проще GIF использовать.
Вот целых две: pngcrush, pngout
Тут есть одна проблема: если необходимо прозрачное изображение, скажем подложка для меню с прозрачностью 50%? Тут этот способ не работает.
Да-да, этот костыль только для 100% прозрачности, о чем написал
StopDesign выше. Придется использовать хаки с фильтрами для IE :(

Использую gif сравнительно редко, так как сжимает png намного лучше. Полупрозрачность же для IE6 и ниже не использую, так как все методы её показа основаны на одном — фильтрах Direct X, что приводит к скачиванию картинки при каждом отображении, минуя кэш.
Behavior в CSS, png.htc и blank.gif
Javascript от уважвемого Tigir (function fixPNG(element))
Javascript с использованием window.attachEvent("onload", correctPNG)
Всё это безбожно тормозит... по крайней мере на непростой странице...
рекомендую не леницца и использовать 1 вариант
Javascript от уважвемого Tigir (function fixPNG(element))
Javascript с использованием window.attachEvent("onload", correctPNG)
Всё это безбожно тормозит... по крайней мере на непростой странице...
рекомендую не леницца и использовать 1 вариант
Sign up to leave a comment.
Как вы боретесь с PNG при верстке?