PNG в IE: переключить непрозрачность для частично прозрачного img? - PullRequest
Новая
       33

PNG в IE: переключить непрозрачность для частично прозрачного img?

1 голос
/ 17 апреля 2011

У меня есть файл изображения PNG, который частично прозрачен. Мне нужно переключить его непрозрачность.

В настоящее время я использую следующий код CSS для разрешения непрозрачности:

filter:alpha(opacity=50);

Однако в IE возникают проблемы с обработкой прозрачной части PNG. Когда я пытаюсь это исправить, добавив следующий CSS:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../images/translucent_effect.png', sizing Method='scale');

Ну, это не работает. Мой вопрос: какое лучшее решение, которое люди нашли для этой проблемы? Должен ли я просто конвертировать PNG в GIF? Или есть более элегантное решение?

Спасибо.

1 Ответ

1 голос
/ 17 апреля 2011

Стиль IE filter - ужасный беспорядок. Он позволяет браузеру делать несколько трюков, которые в противном случае вышли бы за его рамки, но он нестандартен и имеет некоторые серьезные проблемы.

Я не могу быть уверен, не увидев ваш полный CSS, но мне кажется, что вы попали в одну из самых больших хитростей filter уловок:

Если вам нужно указать более одного фильтра, вы должны указать их вместе. Если вы указываете их отдельно, как вы сделали в своем примере, второй filter переопределяет первый, даже если они фактически выполняют совершенно другие действия. Это на самом деле согласуется с тем, как вообще работают таблицы стилей CSS, но нелогично из-за того, что filter может сделать.

Вы можете указать несколько фильтров в одном стиле filter, разделенных пробелом.

См. Здесь для справки: http://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx

Проблемы с этим подходом очевидны, если вы хотите, чтобы в таблице стилей были разные эффекты, вызванные разными именами классов, - потому что нет способа объединить фильтры из разных источников в один и тот же элемент.

Другой большой недостаток, который может вас поймать, заключается в том, что фильтры, написанные с синтаксисом progid:, на самом деле являются недействительными CSS из-за двоеточия, и это достаточно плохо, чтобы заставить некоторые браузеры не IE задыхаться от всей таблицы стилей , Этого можно избежать, используя сокращенный синтаксис (согласно фильтру alpha() в вашем первом примере), для IE6 и IE7 или для IE8 с альтернативой -ms-filter, используя более длинный синтаксис, заключая все это в кавычки .

Вот пример: 

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/translucent_effect.png', sizing Method='scale');"

Надеюсь, это поможет.

...