Новая тема   Ответить

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

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




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




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



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

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

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

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

 Asiris


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

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

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

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

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

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

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

 besoft
protch писал:

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

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

Код:

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

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

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

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

 protch
Maxik писал:
КАК ты это сделал?!!!

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

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

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

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

Цитата:

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

 KEV
в 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

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

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

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

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

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

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

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

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

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

 art-s
protch писал:
Ну что получается так?

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