В IE прозрачная PNG берет не правильный бэкграунд

[alex-ks]

И так возникла проблема. Есть две картинки. Одна из них с прозрачным фоном. Нужно наложить картинку с прозрачным фоном на вторую.

Делаю так: смещаю див с прозрачной картинкой: display: inline; position:relative; left: -37px; bottom: -105px;

В итоге получаем правильное расположение. Прозрачная картинка на непрозрачной второй.

НО! В IE получаем белый фон у картинки с прозрачным фоном!

Этот фон IE берет из !изначального места расположения картинки, до сдвига с помощью display: inline; position:relative; left: -37px; bottom: -105px;

Т.е если у контейнера с картинками фон синий - у прозрачной картинки тоже будет синий фон

Как это побороть? Этот баг только в IE в остальных при сдвиге - фон картинки прозрачный.

Может есть какие-то мысли по этому поводу? пробовал указывать background-color: transparent; но ие опять показывает фон контейнера до сдвига...

[slicemasta]

Ие 6 знаменит своим косячным поведением с пнг картинками, как пофиксить читайте в гугле:

http://www.google.com.ua/search?hl=ru&...mp;aq=f&oq=

[lasscal]

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

img.png{

behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",

this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",

this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),

this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",

this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)

);

}

[LunatiK]

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

img.png{

behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",

this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",

this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),

this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",

this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)

);

}

Уважемый, если вы думаете, что JS, когда пишется не в HTML, а в CSS, и после этого он перестаёт быть JS, то вы ошибаетесь

[Alastor]

НО! В IE получаем белый фон у картинки с прозрачным фоном!

А позволь поинтересоваться, каким образом досигалась прозрачность у .png файла? Как вытравливался фон?

Смотри - http://freeway-design.ru/ - видишь логотип? Открой в IE6. Никаких косяков. Вот он как раз прозрачный .png на непрозрачном бэкграунде. Да, согласен, бэкграунд светлый, но косяки в обтравке все равно было бы заметно.

Так вот твоя проблема решается без всяких фиксов, просто правильной обтравкой в фотошопе и правильно выбранным режимом.

P.S.

Или я неправильно понял задачу?

Edited March 10, 2010 by Alastor

[Great Rash]

Я подозреваю, что вы, товарищи, неправильно поняли вопрос топикстартера. Сдается мне, что фикс для ИЕ6 у него прикручен но после того как пофиксенная картинка сдвигается (например скриптом) куда-либо у нее остается фон от того места где она стояла изначально.

alex-ks, я прав?

Могу посоветовать попробовать сначала проставить картинке display: none; (в этом случае браузер, по идее, не должен рендерить элемент), а после сдвига назначить display: inline;

Авось поможет...