+ + +
С нами с 08.06.06
Сообщения: 712
Рейтинг: 136
|
Добавлено: 08/10/06 в 12:00 |
Понадобились картинки с прозрачным фоном. Раньше я делал их в ГИФе, и никаких проблем не возникало. Но ГИФ дает плохое качество, границы очень не ровные, поэтому я решил попробовать ПНГ. Столкнулся с какой-то херью (извините за слово "какой-то").
Значит, сделал я в фотошопе для примера изображение, сохранил его как ПНГ, все нормально.
Вот оно, в формате ПНГ. У меня в Фаерфоксе смотрится правильно.
Вот как это смотрелось в Фотошопе. Нормально.
Открыл его в ИЭксплорере 6, а там изображение ограничено прямоугольником по крайним как бы точкам, и фон заполнен цветным полосатым фоном. Довольно красиво, но мне такой хоккей не нужен.
Когда я открываю фотку с расширением ПНГ в Dreamweaver МХ, у меня появляется то же изображение, что и в Эксплорере, т.е с полосатым фоном - работать невозможно. Перебрал все настройки, ничего не помогает (или я что-то не правильно делаю).
У меня установлены ВиндоусХР Про, ИЕ6 и Квиктайм 6. Компьютер двухядерный, довольно свежий - трехнедельный, вряд ли успел за это время шибко устареть.
Попробовал открыть ПНГ-файл на другом компьютере, где просто пентиум-4 и Квиктайм7 -- в Эксплорере-6 та же проблема с идиотским фоном, в Дримвивере цветной фон отсутствует, но прозрачность исчезла, девка оказалась на чиста белом непрозрачном фоне.
Что делать - ума не приложу. Поделитесь, пожалуйста, своим умом.
|
|
|
|
С нами с 31.12.03
Сообщения: 160
Рейтинг: 260
|
Добавлено: 08/10/06 в 12:06 |
Последний раз редактировалось: Asiris (12/07/20 в 12:25), всего редактировалось 1 раз
|
|
|
|
С нами с 06.03.03
Сообщения: 1650
Рейтинг: 1096
|
Добавлено: 08/10/06 в 12:12 |
я сам не сталкивался, но часто натыкаюсь на инфу о том, что IE с PNG криво работает, именно с прозрачностью, и поэтому PNG пока не такой распространенный формат как хотелось бы.
|
|
|
|
+ + +
С нами с 08.06.06
Сообщения: 712
Рейтинг: 136
|
Добавлено: 08/10/06 в 12:32 |
webboxxx писал: | я сам не сталкивался, но часто натыкаюсь на инфу о том, что IE с PNG криво работает, именно с прозрачностью, и поэтому PNG пока не такой распространенный формат как хотелось бы.
|
А почему Дримвивер не видит прозрачность?
|
|
|
|
С нами с 26.04.06
Сообщения: 77
Рейтинг: 70
|
Добавлено: 08/10/06 в 12:58 |
|
|
|
|
С нами с 02.10.06
Сообщения: 13
Рейтинг: 21
|
Добавлено: 08/10/06 в 12:59 |
Это старая проблема с IE версиями ниже 7.0
Только на маке 5.5 нормально показывает. Ищи в гугле по png transparency - на эту тему куча статей. Решается подключением одного файла javascript.
У дримвивера нету своего браузера, он использует ие для отображения дизайн-мода (соответственно ту версию которая у тебя стоит).
|
|
|
|
+ + +
С нами с 08.06.06
Сообщения: 712
Рейтинг: 136
|
Добавлено: 08/10/06 в 13:16 |
d0ck3r писал: | Это старая проблема с IE версиями ниже 7.0
Только на маке 5.5 нормально показывает. Ищи в гугле по png transparency - на эту тему куча статей. Решается подключением одного файла javascript.
У дримвивера нету своего браузера, он использует ие для отображения дизайн-мода (соответственно ту версию которая у тебя стоит).
|
Док, спасибо, ясно изложил.
Я понял, что в таком случае мне и мучаться не стоит, все-одно, не пойму ни хера, темен я технически.
А не подскажешь, как в ГИФЕ сделать границы поровнее? Мне нужны небольшие картинки с очень неровными объектами на прозрачном фоне.
|
|
|
|
+ + +
С нами с 08.06.06
Сообщения: 712
Рейтинг: 136
|
Добавлено: 08/10/06 в 13:20 |
Спасибо. Было очень интересно. Как будто посмотрел красивые китайские иероглифы - ничего не ясно, но за душу берет.
|
|
|
|
С нами с 26.04.06
Сообщения: 77
Рейтинг: 70
|
Добавлено: 08/10/06 в 13:31 |
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");
}
|
после чего должна появиться прозрачность в ИЕ
|
|
|
|
+ + +
С нами с 08.06.06
Сообщения: 712
Рейтинг: 136
|
Добавлено: 08/10/06 в 13:53 |
besoft писал: | )))
картинку так вставляешь:
[code]
* html .png
после чего должна появиться прозрачность в ИЕ |
Спасибо еще раз. Чувствую, что это именно то, что доктор прописал. Остались, правда, кое-какие неясности, и я мог бы задать вопрос, но боюсь, что софорумники, усомнившись в моих умственных способностях, натравят на меня спецслужбу из Кащенки или с Канатчиковой. А мне там как-то не с руки.
Я умею только в Дримвивере чой-то делать, а шпиёнским кодам всяким буржуазным мне пролетарское происхождение не позволяет доверять.
Можно, я спрошу тебя по мылу?
Моё - 33banana@gmail.com
Сочтемся.
|
|
|
|
Maxx-Traffic.biz
С нами с 09.12.03
Сообщения: 754
Рейтинг: 383
|
Добавлено: 08/10/06 в 14:22 |
Тема заинтересовала...
Цитата: | )))
картинку так вставляешь:
Код:
<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 что пользователь врядли сделает, после виндовых предупреждений о безопасности....Мож есть другой путь, чтоб ИЕ не раздражать?
|
|
|
|
+ + +
С нами с 08.06.06
Сообщения: 712
Рейтинг: 136
|
Добавлено: 08/10/06 в 14:29 |
Maxik писал: | Тема заинтересовала...
Все зделал как написано
|
КАК ты это сделал?!!!
|
|
|
|
Maxx-Traffic.biz
С нами с 09.12.03
Сообщения: 754
Рейтинг: 383
|
Добавлено: 08/10/06 в 14:41 |
В css добавил код, который ты дал.
Потом в страничку картинку вставил вышеуказаным способом, открыл страничку в ИЕ, он ругнулся насчет ActiveX, когда я разрешил ActivedX все отобразилось как положено, с прозрачным фоном.
|
|
|
|
Maxx-Traffic.biz
С нами с 09.12.03
Сообщения: 754
Рейтинг: 383
|
Добавлено: 08/10/06 в 14:46 |
Прошу прощения, код который дал besoft
|
|
|
|
+ + +
С нами с 08.06.06
Сообщения: 712
Рейтинг: 136
|
Добавлено: 08/10/06 в 15:16 |
Maxik писал: | В css добавил код, который ты дал.
Потом в страничку картинку вставил вышеуказаным способом, открыл страничку в ИЕ, он ругнулся насчет ActiveX, когда я разрешил ActivedX все отобразилось как положено, с прозрачным фоном.
|
Все предельно понятно. Осталось два невыясненных вопроса:
1. КАК ты добавил код в css?
2. КАК ты вставил картинку вышеуказанным способом?
А вот как открыть страничку в ИЕ я уже знаю. И ругнуться могу - не хуже его.
|
|
|
|
Maxx-Traffic.biz
С нами с 09.12.03
Сообщения: 754
Рейтинг: 383
|
Добавлено: 08/10/06 в 15:54 |
Цитата: | 1. КАК ты добавил код в css? |
открываешь css в блокноте, и через копи паст тупо встявляешь туда вышеуказаный код.
Цитата: | 2. КАК ты вставил картинку вышеуказанным способом? |
Мда, как вставляекся картинка в html? Правильно, <img src=....>.
тока нада заключить в контейнер <i class="png"><img src=....></i>
и будет тебе счастье...
|
|
|
|
С нами с 19.02.03
Сообщения: 129
Рейтинг: 86
|
Добавлено: 08/10/06 в 16:30 |
в 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
ЗЫ Помоему самый лучший на сегодня вариант, работает везде
Честно был стрырен у Лебедева и доработан ;-)
|
|
|
|
С нами с 26.04.06
Сообщения: 77
Рейтинг: 70
|
Добавлено: 08/10/06 в 16:37 |
Maxik писал: | Все зделал как написано, тока ИЕ стал ругаться на элемент Activex и в результате у картинки был белый фон...(( Если тока разрешить Activex что пользователь врядли сделает, после виндовых предупреждений о безопасности....Мож есть другой путь, чтоб ИЕ не раздражать? |
если ты с локального диска открывал то ИЕ всегда ругается на скрипты. если из интернета то у меня не ругается...
|
|
|
|
+ + +
С нами с 08.06.06
Сообщения: 712
Рейтинг: 136
|
Добавлено: 08/10/06 в 17:23 |
KEV писал: | в css вот этот код
img {behavior: url('png.htc');}
и код волшебного файлика
да, не забудь про прозрачный гиф, что указан в коде, размером 1х1
ЗЫ Помоему самый лучший на сегодня вариант, работает везде
Честно был стрырен у Лебедева и доработан ;-)
|
Спасибо.
Написал тебе на мыло из профиля.
|
|
|
|
С нами с 22.10.02
Сообщения: 349
Рейтинг: 98
|
Добавлено: 08/10/06 в 20:08 |
Странно у меня если просто сохроняешь в фотошопе не в PNG-24 а в PNG-8 128 Dithered с стандартными настройками, то во всех браузерах все нормально отображается.
Вот к примеру твой пример просто пересахранен.
Фотошоп CS2
но и в более старых версиях тоже самое было, все нормально отображается.
|
|
|
|
+ + +
С нами с 08.06.06
Сообщения: 712
Рейтинг: 136
|
Добавлено: 09/10/06 в 00:16 |
art-s писал: | Странно у меня если просто сохроняешь в фотошопе не в PNG-24 а в PNG-8 128 Dithered с стандартными настройками, то во всех браузерах все нормально отображается.
|
Спасибо. Щазз запробую. О результате доложу.
|
|
|
|
осинизатор
С нами с 10.03.03
Сообщения: 8491
Рейтинг: 819
|
Добавлено: 09/10/06 в 01:08 |
У меня в IE 7 нормально прозрачность работает. Кстати, .png это не новый формат, а очень даже старый (кажется с амиги еще). Х.з. почему его не все браузеры поддерживать умеют. Тем более, у него есть очень большой плюс перед гифом - png не ограничен 256-ю цветами, как gif, например.
|
|
|
|
С нами с 02.10.06
Сообщения: 13
Рейтинг: 21
|
Добавлено: 09/10/06 в 08:09 |
В Ie 7 поддержку этого формата ввели недавно из-за долгих препирательств с дезигнерами )), поэтому там все работает.
У KEVa действительно один из лучших вариантов решения.
Есть во всех этих методах недостатки -
1) до подгрузки файлика все прозрачное пространство заливается серым цветом, потом смаргивает и отображается нормально
2) там проблемы с линками, то есть на этот img ты не сможешь повесить линку.
Большинство в ИЕ подставляет гифки вместо пнг, так что тебе действительно лучше не заморачиваться. Просто добавь качества гифке, в шопе есть параметр matte - задай его близким к цвету фона, или вообще цвет фона если он у тебя однотонный )) и будет тебе щастье.
|
|
|
|
С нами с 22.10.02
Сообщения: 349
Рейтинг: 98
|
Добавлено: 09/10/06 в 23:29 |
protch писал: | Спасибо. Щазз запробую. О результате доложу. |
Ну что получается так?
|
|
|
|
+ + +
С нами с 08.06.06
Сообщения: 712
Рейтинг: 136
|
Добавлено: 14/10/06 в 18:56 |
art-s писал: | Ну что получается так?
|
С ПНГ-8 у меня все так же херово работало, но я все-таки решил проблему. С помощью добрых людей.
В папку, где хранятся пнг-фотки и html-страничка для них, я тупо добавляю два любезно даденых мне файлика - .css и .htc, а также две (почему-то) прозрачных гиф-картинки по 1 пикселю. После этого я помещаю на страничку картинки, а в их код способом копи-паст вставляю несколько букв. И все!
После этого прозрачность сохраняется не только в 6-м, но и в 5-м Эксплорере.
|
|
|
|