Кто работал с .png?

Понадобились картинки с прозрачным фоном. Раньше я делал их в ГИФе, и никаких проблем не возникало. Но ГИФ дает плохое качество, границы очень не ровные, поэтому я решил попробовать ПНГ. Столкнулся с какой-то херью (извините за слово "какой-то").
Значит, сделал я в фотошопе для примера изображение, сохранил его как ПНГ, все нормально.

Вот оно, в формате ПНГ. У меня в Фаерфоксе смотрится правильно.




Вот как это смотрелось в Фотошопе. Нормально.




Открыл его в ИЭксплорере 6, а там изображение ограничено прямоугольником по крайним как бы точкам, и фон заполнен цветным полосатым фоном. Довольно красиво, но мне такой хоккей не нужен.



Когда я открываю фотку с расширением ПНГ в Dreamweaver МХ, у меня появляется то же изображение, что и в Эксплорере, т.е с полосатым фоном - работать невозможно. Перебрал все настройки, ничего не помогает (или я что-то не правильно делаю).

У меня установлены ВиндоусХР Про, ИЕ6 и Квиктайм 6. Компьютер двухядерный, довольно свежий - трехнедельный, вряд ли успел за это время шибко устареть.

Попробовал открыть ПНГ-файл на другом компьютере, где просто пентиум-4 и Квиктайм7 -- в Эксплорере-6 та же проблема с идиотским фоном, в Дримвивере цветной фон отсутствует, но прозрачность исчезла, девка оказалась на чиста белом непрозрачном фоне.

Что делать - ума не приложу. Поделитесь, пожалуйста, своим умом.

Последний раз редактировалось: Asiris (12/07/20 в 12:25), всего редактировалось 1 раз

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

webboxxx писал:

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

А почему Дримвивер не видит прозрачность?

http://community.livejournal.com/ru_coding/259331.html

Это старая проблема с IE версиями ниже 7.0
Только на маке 5.5 нормально показывает. Ищи в гугле по png transparency - на эту тему куча статей. Решается подключением одного файла javascript.
У дримвивера нету своего браузера, он использует ие для отображения дизайн-мода (соответственно ту версию которая у тебя стоит).

d0ck3r писал:

Это старая проблема с IE версиями ниже 7.0 Только на маке 5.5 нормально показывает. Ищи в гугле по png transparency - на эту тему куча статей. Решается подключением одного файла javascript. У дримвивера нету своего браузера, он использует ие для отображения дизайн-мода (соответственно ту версию которая у тебя стоит).

Док, спасибо, ясно изложил.
Я понял, что в таком случае мне и мучаться не стоит, все-одно, не пойму ни хера, темен я технически.
А не подскажешь, как в ГИФЕ сделать границы поровнее? Мне нужны небольшие картинки с очень неровными объектами на прозрачном фоне.

besoft писал:

http://community.livejournal.com/ru_coding/259331.html

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

protch писал:

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

)))
картинку так вставляешь:

Код:

<i class="png"><img src="image.png" alt="Image"/></i>

и потом в css добавляешь следующий код:

Код:

* html .png     {         width: expression(this.firstChild.width);         filter: expression("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+                 this.firstChild.src+"', sizingMethod='image')");         background: expression("transparent url("+                 this.firstChild.src.replace(".png", ".gif")+") no-repeat");         backgr\ound: none !important;     }     * html .png img     {         behavior: expression(this.style.visibility="hidden");     }

после чего должна появиться прозрачность в ИЕ

besoft писал:

))) картинку так вставляешь: [code] * html .png после чего должна появиться прозрачность в ИЕ

Спасибо еще раз. Чувствую, что это именно то, что доктор прописал. Остались, правда, кое-какие неясности, и я мог бы задать вопрос, но боюсь, что софорумники, усомнившись в моих умственных способностях, натравят на меня спецслужбу из Кащенки или с Канатчиковой. А мне там как-то не с руки.
Я умею только в Дримвивере чой-то делать, а шпиёнским кодам всяким буржуазным мне пролетарское происхождение не позволяет доверять.
Можно, я спрошу тебя по мылу?
Моё - 33banana@gmail.com
Сочтемся.

Тема заинтересовала...

Цитата:

))) картинку так вставляешь: Код: <i class="png"><img src="image.png" alt="Image"/></i> и потом в css добавляешь следующий код: Код: * html .png { width: expression(this.firstChild.width); filter: expression("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ this.firstChild.src+"', sizingMethod='image')"); background: expression("transparent url("+ this.firstChild.src.replace(".png", ".gif")+") no-repeat"); backgr\ound: none !important; } * html .png img { behavior: expression(this.style.visibility="hidden"); } после чего должна появиться прозрачность в ИЕ

Все зделал как написано, тока ИЕ стал ругаться на элемент Activex и в результате у картинки был белый фон...(( Если тока разрешить Activex что пользователь врядли сделает, после виндовых предупреждений о безопасности....Мож есть другой путь, чтоб ИЕ не раздражать?

Maxik писал:

Тема заинтересовала... Все зделал как написано

КАК ты это сделал?!!!

В css добавил код, который ты дал.
Потом в страничку картинку вставил вышеуказаным способом, открыл страничку в ИЕ, он ругнулся насчет ActiveX, когда я разрешил ActivedX все отобразилось как положено, с прозрачным фоном.

Прошу прощения, код который дал besoft

Maxik писал:

В css добавил код, который ты дал. Потом в страничку картинку вставил вышеуказаным способом, открыл страничку в ИЕ, он ругнулся насчет ActiveX, когда я разрешил ActivedX все отобразилось как положено, с прозрачным фоном.

Все предельно понятно. Осталось два невыясненных вопроса:
1. КАК ты добавил код в css?
2. КАК ты вставил картинку вышеуказанным способом?
А вот как открыть страничку в ИЕ я уже знаю. И ругнуться могу - не хуже его.

Цитата:

1. КАК ты добавил код в css?

открываешь css в блокноте, и через копи паст тупо встявляешь туда вышеуказаный код.

Цитата:

2. КАК ты вставил картинку вышеуказанным способом?

Мда, как вставляекся картинка в html? Правильно, <img src=....>.
тока нада заключить в контейнер <i class="png"><img src=....></i>
и будет тебе счастье...

в css вот этот код

img {behavior: url('png.htc');}


и код волшебного файлика


-----------png.htc----------

<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>

var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "./img/pix.gif";

if (supported) fixImage();

function propertyChanged() {
if (!supported) return;

var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if ( ! new RegExp(blankSrc).test(src))
fixImage();
};

function fixImage() {
// get src
var src = element.src;

// check for real change
if (src == realSrc) {
element.src = blankSrc;
return;
}

if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}

// test for png
if ( realSrc && /\.png$/.test( realSrc.toLowerCase() ) ) {
// set blank image
element.src = blankSrc;
// set filter
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
}
else {
// remove filter
element.runtimeStyle.filter = "";
}
}

</script>
</public:component>
-----------png.htc----------

да, не забудь про прозрачный гиф, что указан в коде, размером 1х1

ЗЫ Помоему самый лучший на сегодня вариант, работает везде
Честно был стрырен у Лебедева и доработан ;-)

Maxik писал:

Все зделал как написано, тока ИЕ стал ругаться на элемент Activex и в результате у картинки был белый фон...(( Если тока разрешить Activex что пользователь врядли сделает, после виндовых предупреждений о безопасности....Мож есть другой путь, чтоб ИЕ не раздражать?

если ты с локального диска открывал то ИЕ всегда ругается на скрипты. если из интернета то у меня не ругается...

KEV писал:

в css вот этот код img {behavior: url('png.htc');} и код волшебного файлика да, не забудь про прозрачный гиф, что указан в коде, размером 1х1 ЗЫ Помоему самый лучший на сегодня вариант, работает везде Честно был стрырен у Лебедева и доработан ;-)

Спасибо.
Написал тебе на мыло из профиля.

Странно у меня если просто сохроняешь в фотошопе не в PNG-24 а в PNG-8 128 Dithered с стандартными настройками, то во всех браузерах все нормально отображается.
Вот к примеру твой пример просто пересахранен.

Фотошоп CS2
но и в более старых версиях тоже самое было, все нормально отображается.

art-s писал:

Странно у меня если просто сохроняешь в фотошопе не в PNG-24 а в PNG-8 128 Dithered с стандартными настройками, то во всех браузерах все нормально отображается.

Спасибо. Щазз запробую. О результате доложу.

У меня в IE 7 нормально прозрачность работает. Кстати, .png это не новый формат, а очень даже старый (кажется с амиги еще). Х.з. почему его не все браузеры поддерживать умеют. Тем более, у него есть очень большой плюс перед гифом - png не ограничен 256-ю цветами, как gif, например.

В Ie 7 поддержку этого формата ввели недавно из-за долгих препирательств с дезигнерами )), поэтому там все работает.
У KEVa действительно один из лучших вариантов решения.
Есть во всех этих методах недостатки -
1) до подгрузки файлика все прозрачное пространство заливается серым цветом, потом смаргивает и отображается нормально
2) там проблемы с линками, то есть на этот img ты не сможешь повесить линку.

Большинство в ИЕ подставляет гифки вместо пнг, так что тебе действительно лучше не заморачиваться. Просто добавь качества гифке, в шопе есть параметр matte - задай его близким к цвету фона, или вообще цвет фона если он у тебя однотонный )) и будет тебе щастье.

protch писал:

Спасибо. Щазз запробую. О результате доложу.

Ну что получается так?

art-s писал:

Ну что получается так?

С ПНГ-8 у меня все так же херово работало, но я все-таки решил проблему. С помощью добрых людей.
В папку, где хранятся пнг-фотки и html-страничка для них, я тупо добавляю два любезно даденых мне файлика - .css и .htc, а также две (почему-то) прозрачных гиф-картинки по 1 пикселю. После этого я помещаю на страничку картинки, а в их код способом копи-паст вставляю несколько букв. И все!
После этого прозрачность сохраняется не только в 6-м, но и в 5-м Эксплорере.