Анимация PNG-изображений не плавная, в IE она имеет черный фон - PullRequest
Новая
       25

Анимация PNG-изображений не плавная, в IE она имеет черный фон

1 голос
/ 02 февраля 2012

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

Я выложил небольшую демонстрацию этой проблемы:http://www.fersh.nl/pinpoint-animation/

У меня 2 проблемы:

В IE я не могу сделать изображение прозрачным, я пробовал некоторые решения, но он не работает, я пробовал это решение: http://www.viget.com/inspire/jquery-ie-png-24-ie-black-background-issue-solved/ Но он все еще получает черный фон.И мне нужно, чтобы он был прозрачным, потому что он будет анимироваться над изображением с более чем одним цветом.

А анимация не такая плавная, я использую левую и верхнюю части, чтобы держать изображение по центру, а такжекачество изображения меняется при анимации.

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

Ответы [ 2 ]

0 голосов
/ 02 февраля 2012

Надеюсь, это поможет, если вы не попробовали это.Это поддержка сохранения файла,

. Вы можете использовать команду «Сохранить как» для сохранения изображений в режиме RGB, индексированного цвета, градаций серого и растрового изображения в формате PNG.

Примечание. Также можно сохранитьизображение в виде одного или нескольких файлов PNG с помощью команды «Сохранить для Web и устройств».

  1. Выберите «Файл»> «Сохранить как» и выберите PNG в меню «Формат».
  2. Выберите параметр чересстрочной развертки:
  3. Нажмите OK.

Нет Отображение изображения в браузере только после завершения загрузки.Чересстрочная развертка Отображает версии изображения с низким разрешением в браузере по мере загрузки файла.Чересстрочная развертка сокращает время загрузки, но также увеличивает размер файла.

0 голосов
/ 02 февраля 2012

IE обычно не очень хорошо работает с PNG.Вы можете попробовать использовать zoom:1 для элемента и посмотреть, поможет ли это.Черный фон, который вы видите, является результатом фирменных фильтров IE.

Кроме того, вы должны попробовать применить анимацию к родительскому элементу, а не к элементу.Поэтому, если вам нужно вложить свой анимированный элемент в другой элемент, вы должны это сделать.Например, вместо использования: 

<div id="gallery">
    <img src="/path/to/image/image1.png" />
    <img src="/path/to/image/image2.png" />
    <img src="/path/to/image/image3.png" />
    <img src="/path/to/image/image4.png" />
</div>

и применения анимации к изображению, попробуйте использовать: 

<div id="gallery">
    <ul>
        <li><img src="/path/to/image/image1.png" /></li>
        <li><img src="/path/to/image/image2.png" /></li>
        <li><img src="/path/to/image/image3.png" /></li>
        <li><img src="/path/to/image/image4.png" /></li>
    </ul>
</div>

и применить переходы к элементам li.

Кроме того, если вы не против использования JQuery, попробуйте использовать этот плагин - http://jquery.andreaseberhard.de/pngFix/ и посмотрите, поможет ли он.

...