Зеркальное отображение / отражение изображений в IE и поддержание прозрачности

Question

Я экспериментировал с переворачиванием фоновых изображений с помощью этого css:

.flipHorizontal {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

Все отлично работает во всех браузерах, кроме IE, когда у вас есть PNG с прозрачным фоном (альфа-канал).Все прозрачные и полупрозрачные пиксели становятся полностью черными.

Кто-нибудь знает обходной путь для этого?

Может быть, есть другой фильтр (читай «исправление»), который реализован MS для решения этой проблемы,Я думаю, что та же ошибка относится к вращению и другим фильтрам преобразования, а также с PNG.

Answer 1

Итак, я понимаю, что это на 2 года позже. Сожалею. :)

Но для всех, кто сюда попал, попробуйте наложить фоновый цвет на CSS, и это должно сделать его счастливым (или, по крайней мере, это устраняет ту же самую проблему, когда вы ее исчезаете, я думаю, это все одинаковые ошибки маскировки).

Answer 2

Используйте старый хак IE6 AlphaImageLoader, чтобы получить то, что вы ищете, вместе с другим DXImageTransform, чтобы сделать переворот. К сожалению, он становится менее общим, поскольку вы должны определить изображение, но вы можете динамически установить стиль с помощью некоторого сценария. (См. здесь для примера динамического скриптинга - ищите код pngfix.js.)

.flipHorizontal {
   -moz-transform: scaleX(-1);
   -webkit-transform: scaleX(-1);
   -o-transform: scaleX(-1);
   transform: scaleX(-1);
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myImage.png')
           progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
}

Успешно протестировано в IE8 и FF3.6. Не уверен, что вам нужен -ms-фильтр, но я не смог протестировать IE6 или IE7, и не уверен, нужен ли ему этот атрибут.