beatlejute 20 апр 2010 в 10:06

Прозрачный текст при совместном использовании фильтров Matrix и AlphaImageLoader в IE

1 мин

1.4K

Браузеры

+15

Комментарии 47

can3p 20 апр 2010 в 10:44

в моем шестом осле желтого стикера просто не видно

beatlejute 20 апр 2010 в 10:47

а да, забыл сказать, глюк в 6 есть только пример там не работает, мой.

ArtyV 20 апр 2010 в 15:32

Работал бы этот баг везде, было бы здорово: )))

beatlejute 20 апр 2010 в 15:40

Ну можно нечто подобное, наверное, достичь с svg

ArtyV 20 апр 2010 в 15:43

Это уже будет не то : D

beatlejute 20 апр 2010 в 15:49

Угу

НЛО прилетело и опубликовало эту надпись здесь

beatlejute 20 апр 2010 в 18:50

А где можно будет на досуге почитать?

НЛО прилетело и опубликовало эту надпись здесь

beatlejute 21 апр 2010 в 06:54

А ну да, ступил, подумал в хроме можно…

НЛО прилетело и опубликовало эту надпись здесь

izzik 20 апр 2010 в 15:56

Safari Version 4.0.5 (6531.22.7)

romanoza 20 апр 2010 в 16:02

не работает? странно :)))

kosiakk 20 апр 2010 в 16:06

хром тоже.

к счастью =) не надо нам такого

romanoza 20 апр 2010 в 16:17

народ, вы смеетесь?
схуяли вебкитам, да и вообще не IE поддерживать проприетарные фильтры MS?

grcool 20 апр 2010 в 16:23

Ну вообще-то да, смеемся)

izzik 20 апр 2010 в 16:32

Вот говорю же наде Irony тег добавить, а вы нет мы и так поймем если это шутка.

romanoza 20 апр 2010 в 16:38

обычно так

maxano 20 апр 2010 в 16:10

Opera 10.51 тоже все хорошо.

glazs 20 апр 2010 в 16:27

Дурачки что ли? Написано же, что IE. И в заголовке, и в посте.

beatlejute 20 апр 2010 в 18:52

Надо же все еще смешно

beatlejute 20 апр 2010 в 18:52

Смешно

НЛО прилетело и опубликовало эту надпись здесь

beatlejute 20 апр 2010 в 18:55

Это решение проблемы альфа-канала у png, в статье даже есть ссылка на решение с усложнением структуры о котором вы говорите…

beatlejute 21 апр 2010 в 08:55

Да действительно, усложнение дом структуры помогло… Спасибо.

stetzen 20 апр 2010 в 16:13

IMHO, прозрачность в тексте не должна работать вообще никогда и ни при каких обстоятельствах. Читабельность от этого может только ухудшиться.

НЛО прилетело и опубликовало эту надпись здесь

asm0dey 20 апр 2010 в 16:15

В файрфоксе нету прозрачности, в ие есть, но то, что происходит при выделении — ад.

beatlejute 20 апр 2010 в 18:56

Все уже не смешно

beatlejute 20 апр 2010 в 18:56

А нет, все еще смешно

Kastrulya 20 апр 2010 в 16:16

мс это комментирует, как фичу?

beatlejute 20 апр 2010 в 18:58

МС перед мной еще не оправдывались

kirilloid 20 апр 2010 в 16:18

«если не назначен background-сolor»
IE (как минимум 6-ой) в таком случае иногда не хочет блочному элементу даже высоту прописывать в quirksmode. Если я ничего не напутал.

beatlejute 20 апр 2010 в 19:07

Такое ощущение что внутри дирексовских фильтров используется старый рендер, обратил внимание на то, что при применение фильтров всплывает глюк overflow: visible в IE8

Gesper 20 апр 2010 в 16:39

Выделение тоже очень забавно выглядит

Bonch 20 апр 2010 в 16:42

Как то давно добивался подобного результата:

Делал вроде так:

Создаем div, ставим ему стиль filter: alpha(opacity=60);
В него вкладываем другой div с требующимся текстом. Устанавливаем этому div'у стиль
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=«1px_transparent_image.png»,sizingMethod=«crop»);

beatlejute 20 апр 2010 в 19:08

Угу, 2 фильтра как у меня

Ivan_Savvin 20 апр 2010 в 16:44

блин, причем тут Safari, хром? Ясно написано: баг в осле.

xqz_me 20 апр 2010 в 16:54

При масштабировании страницы в IE8 текст снова становится чёрным. В IE9 баг отсутствует.

beatlejute 20 апр 2010 в 19:11

Ага и баг с непрозрачным альфа-каналом у png тоже при масштабировании появляется, что говорит о том, что при масштабировании просто отрубается AlphaImageLoader

darkwire 20 апр 2010 в 17:41

Я предпочитаю для IE вот такую штуку добавлять в CSS:

* html img,
* html .png{
    position:relative;
    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 = "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)
    );
}

Требует transparent.gif (просто прозрачный гиф пиксель на пиксель), зато работает универсально для всех картинок и элементов с alpha-бэкграундами с установленным классом png.